/* ============================================================
   GWR FRONTEND - Seitenstile

   Hier liegt, was vorher als <style>-Block mitten im Body stand.
   Der W3C-Validator wertet ein <style> im Body als Fehler, und der
   Browser muss den Seitenaufbau dafuer zweimal anfassen. Beides faellt
   mit dieser Datei weg.

   Aufbau: erst die Regeln, die sich mehrere Seiten teilen, danach ein
   Abschnitt je Herkunftsdatei. Wer etwas sucht, geht ueber die
   Kommentarzeilen.

   Geladen wird die Datei in views/layout-head.php - nach
   _front-components.css und _dialog.css, vor _cms-content.css.
   ============================================================ */


/* ============================================================
   Sprungmarke zum Inhalt (aus views/nav.php)

   Der Link steht als erstes Element im Body und fuehrt an der
   Navigation vorbei zu <main id="inhalt">. Zu sehen ist er nur,
   solange er den Tastaturfokus hat. Wer mit der Maus arbeitet,
   bemerkt ihn nie.
   ============================================================ */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: .6rem 1.1rem;
    background: var(--gwr-primary, #1B5B3F);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 8px 0;
}
.skip-link:focus {
    left: 0;
    color: #fff;
    outline: 3px solid #fff;
    outline-offset: -3px;
}
/* Die Navigation klebt oben. Ohne den Abstand landet der Sprung
   hinter der Leiste. Rein am Scrollverhalten, nichts am Layout. */
#inhalt { scroll-margin-top: 90px; }


/* ============================================================
   GEMEINSAM 1: Textbloecke im CMS-Bereich
   Herkunft: modules/pages/about.php, modules/pages/euprogramme.php,
   modules/pages/regionalentwicklung.php. Dort standen dieselben Regeln
   dreifach.

   Die Regeln haengen zusaetzlich an .cms-seitentext. Das hat zwei Gruende:
   1. Sie gelten weiter nur auf diesen drei Seiten und nicht auf jeder
      CMS-Seite.
   2. _seiten.css wird VOR _cms-content.css geladen. Ohne die zweite Klasse
      wuerde _cms-content.css sie ueberschreiben, und die drei Seiten
      saehen anders aus als bisher.
   ============================================================ */
.cms-seitentext.cms-content h2 { color: var(--gwr-primary); border-bottom: 2px solid var(--gwr-sand); padding-bottom: .3rem; }
.cms-seitentext.cms-content h2:first-child { margin-top: 0; }
.cms-seitentext.cms-content h3 { color: var(--gwr-primary); font-size: 1.25rem; margin-top: 1.75rem; margin-bottom: .8rem; }
.cms-seitentext.cms-content p { line-height: 1.7; }
.cms-seitentext.cms-content ul, .cms-seitentext.cms-content ol { padding-left: 1.5rem; }

/* Einziger echter Unterschied der drei Dateien: der Abstand unter einem
   Listenpunkt. about.php hatte .3rem, regionalentwicklung.php .35rem.
   Beide bleiben in der bisherigen Ladereihenfolge stehen. Sichtbar wird
   dabei .35rem - genau der Wert, den auch bisher beide Seiten gezeigt
   haben, weil _cms-content.css mit ".cms-content ul li" darueber lag. */
.cms-seitentext.cms-content li { margin-bottom: .3rem; }   /* aus about.php */
.cms-seitentext.cms-content li { margin-bottom: .35rem; }  /* aus regionalentwicklung.php */

/* Info-Boxen im Text der Seite "Ueber uns" (aus modules/pages/about.php) */
.cms-seitentext.cms-content .about-box { border-radius: 16px; padding: 2rem 2.25rem; margin: 2.5rem 0; }
.cms-seitentext.cms-content .about-box h3 { margin-top: 0; color: var(--gwr-dark, #1f2937); font-weight: 700; font-size: 1.35rem; }
.cms-seitentext.cms-content .about-box p { color: var(--gwr-dark, #1f2937); }
.cms-seitentext.cms-content .about-box-sage { background: #dbe5e0; }
.cms-seitentext.cms-content .about-box-grey { background: #e8e9eb; }
.cms-seitentext.cms-content .about-box-grey ul { margin-bottom: 0; }
.cms-seitentext.cms-content .about-box-grey li { margin-bottom: .5rem; }
.cms-seitentext.cms-content .about-box-grey a { color: var(--gwr-dark, #1f2937); }
.cms-seitentext.cms-content .about-box-grey a:hover { color: var(--gwr-primary); }
@media (max-width: 575.98px){ .cms-seitentext.cms-content .about-box { padding: 1.35rem 1.4rem; } }


/* ============================================================
   GEMEINSAM 2: Reiter der Regionalentwicklung
   Herkunft: modules/pages/regionalentwicklung.php und
   modules/pages/euprogramme.php. Beide Bloecke waren Zeichen fuer Zeichen
   gleich, deshalb steht der Satz hier nur einmal.
   ============================================================ */
.re-tabs { gap: .2rem; padding: .25rem 0; flex-wrap: nowrap; overflow-x: auto; }
.re-tabs .nav-link {
    color: var(--gwr-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: .65rem 1rem;
    font-size: .9rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color .2s, border-color .2s;
}
.re-tabs .nav-link:hover { color: var(--gwr-primary); }
.re-tabs .nav-link.active {
    color: var(--gwr-primary);
    border-bottom-color: var(--gwr-primary);
    background: transparent;
}


/* ============================================================
   Navigation (views/nav.php) - Block 1 von 2
   ============================================================ */
.nav-mobile-upper > li > a.nav-link { font-weight: 600; letter-spacing: .02em; }
.nav-mobile-upper .collapse .nav-link { text-transform: none; font-weight: 500; }


/* ============================================================
   Navigation (views/nav.php) - Block 2 von 2
   ============================================================ */
/* === Glass-Header === */
#mainNav {
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(0,0,0,.04);
    transition: background .2s, box-shadow .2s, border-color .2s, padding .2s;
}
#mainNav.is-scrolled {
    background: rgba(255,255,255,.96);
    box-shadow: 0 4px 18px rgba(0,0,0,.07);
    border-bottom-color: rgba(0,0,0,.06);
}
@media (max-width: 991.98px) {
    #mainNav { padding-top: .25rem; padding-bottom: .25rem; }
    #mainNav .navbar-brand img { height: 36px; }
}
/* Logo etwas mehr Atemraum */
#mainNav .navbar-brand img { transition: transform .2s; }
#mainNav .navbar-brand:hover img { transform: scale(1.03); }
/* Such-Input in der Desktop-Navbar – Lupe-Icon innen links */
.nav-search-wrap { position: relative; max-width: 320px; }
.nav-search-input {
    height: 38px;
    width: 150px;
    min-width: 0;
    border-radius: 999px;
    padding-left: 2.2rem !important;
    padding-right: .75rem;
    transition: width .2s ease, padding .2s ease, border-color .15s, background .15s;
    background: var(--gwr-sand);
    border: 1px solid transparent;
    font-size: .9rem;
}
.nav-search-input:focus {
    background: #fff;
    border-color: var(--gwr-primary);
    box-shadow: 0 0 0 .15rem rgba(var(--gwr-primary-rgb), .15);
    width: 240px;   /* klappt beim Tippen auf, spart sonst Platz für die Menüpunkte */
}
/* === Sommerangebote: Untermenüs (gleiche Mechanik wie die übrigen Menüs) === */
#mainNav .sommer-dropdown { min-width: 265px; z-index: 1055; }
#mainNav .sommer-dropdown .dropdown-item { border-radius: 6px; padding: .5rem .8rem; font-size: .88rem; }
#mainNav .dropdown-sub { position: relative; }
#mainNav .dropdown-sub-toggle { display: flex !important; align-items: center; justify-content: space-between; gap: .75rem; font-weight: 600; }
#mainNav .dropdown-sub-toggle > i { font-size: .72rem; opacity: .45; transition: transform .15s; }
#mainNav .dropdown-sub-menu {
    position: absolute; top: -.4rem; left: 100%;
    min-width: 285px; max-height: 68vh; overflow-y: auto;
    padding: .35rem !important; margin-left: .15rem;
    z-index: 1060; background: #fff;
    display: block; opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateX(4px);
    transition: opacity .15s ease, visibility .15s ease, transform .15s ease;
    transition-delay: .2s;
}
#mainNav .dropdown-sub:hover > .dropdown-sub-menu,
#mainNav .dropdown-sub:focus-within > .dropdown-sub-menu,
#mainNav .dropdown-sub > .dropdown-sub-menu:hover {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(0); transition-delay: 0s;
}
#mainNav .dropdown-sub:hover > .dropdown-sub-toggle { background: rgba(var(--gwr-primary-rgb), .1); color: var(--gwr-primary); }
#mainNav .dropdown-sub:hover > .dropdown-sub-toggle > i { transform: translateX(2px); opacity: 1; }
#mainNav .dropdown-sub-menu .dropdown-item { border-radius: 6px; padding: .48rem .75rem; font-size: .86rem; white-space: normal; line-height: 1.35; }
/* Letzte Kategorie: Untermenü nach oben ausrichten, damit es nicht unten rausläuft */
#mainNav .dropdown-sub:last-child > .dropdown-sub-menu { top: auto; bottom: -.4rem; }
@media (min-width: 992px) and (max-width: 1399.98px) {
    #mainNav .dropdown-sub-menu { min-width: 245px; }
}
/* Mobile Kategorie-Zwischenüberschrift */
#mobileMenu { width: 280px; }
.nav-mob-cat {
    padding: .6rem 1.5rem .3rem; font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--gwr-muted, #6b7280);
    background: #f8f9fa; border-bottom: 1px solid #eee;
}

/* === Welche Leiste wird gezeigt? ===
   Die volle Leiste braucht Platz fuer sechs Menuepunkte, Suche und Logo.
   Unter 1200px reicht der nicht, dort uebernimmt die Burger-Leiste. Bei
   groesserer Schrift verschiebt sich die Grenze nach oben, siehe
   _lesehilfe.css. Frueher lag die Grenze bei 992px, da lief die Leiste
   auf einem gewoehnlichen Notebook seitlich aus dem Bild. */
.nav-mobil   { display: flex; }
.nav-desktop { display: none; }
@media (min-width: 1200px) {
    .nav-mobil   { display: none; }
    .nav-desktop { display: flex; }
}

/* Menüpunkte enger setzen, damit alle in eine Zeile passen */
@media (min-width: 1200px) {
    #mainNav { padding-top: .15rem !important; padding-bottom: .15rem !important; }
    .navbar-nav .nav-link { padding-top: .4rem !important; padding-bottom: .4rem !important; font-size: .82rem; letter-spacing: .01em; }
    .navbar-brand img, .navbar-brand svg { max-height: 46px; }
    .nav-social-link { padding: .25rem .35rem; }
    /* Nichts in der Leiste darf umbrechen oder ueberlaufen */
    .nav-desktop .nav-main { flex-wrap: nowrap; min-width: 0; }
    .nav-desktop .nav-link { white-space: nowrap; }
}
/* Schmales Notebook: jede Kleinigkeit zaehlt, damit die Zeile haelt */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .nav-desktop { gap: .5rem !important; }
    .nav-desktop .nav-main { margin-left: 0 !important; }
    .navbar-nav .nav-link { padding-left: .35rem !important; padding-right: .35rem !important; font-size: .75rem; }
    .navbar-brand img, .navbar-brand svg { max-height: 36px; }
    .nav-search-input { height: 34px; }
    /* Instagram und Facebook stehen im Fussbereich noch einmal. Die
       Lesehilfe bleibt, die ist eine Bedienhilfe und keine Zugabe. */
    .nav-desktop .nav-social-link { display: none; }
}
@media (min-width: 1400px) {
    .navbar-nav .nav-link { padding-left: .7rem !important; padding-right: .7rem !important; }
    .nav-search-input { height: 36px; }
}
.nav-search-icon {
    position: absolute; left: 1rem; top: 50%;
    transform: translateY(-50%);
    color: var(--gwr-muted);
    font-size: .95rem;
    pointer-events: none; z-index: 2;
}
/* Suchfeld kompakt: klappt beim Tippen auf, damit die Menüpunkte Platz haben */
/* === Suche als Lupe ===
   Im Ruhezustand ist das Feld nur so breit wie sein Symbol. Erst beim
   Anklicken klappt es auf. Wer etwas gesucht hat, sieht sein Wort weiter
   stehen, dafuer sorgt :not(:placeholder-shown). */
@media (min-width: 1200px) {
    .nav-search-wrap { max-width: none; flex: 0 0 auto; }
    .nav-search-input {
        width: 2.5rem; min-width: 0;
        padding-left: 2.4rem !important;
        padding-right: 0;
        cursor: pointer;
    }
    .nav-search-input:focus,
    .nav-search-input:not(:placeholder-shown) {
        width: 15rem;
        padding-right: .9rem;
        cursor: text;
    }
    .nav-search-icon { left: .78rem; }
    /* Die Menuepunkte bekommen den frei gewordenen Platz */
    .nav-desktop { gap: .75rem !important; }
}

/* Profil-Button in Nav: gleiche Höhe wie Suche */
#mainNav > .container > .d-none.d-lg-flex > .dropdown > .btn,
#mainNav > .container > .d-none.d-lg-flex > .btn-gwr-outline {
    height: 42px;
    padding: 0 1rem !important;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .88rem;
    font-weight: 500;
    background: #fff;
    border: 1px solid #e9ecef;
    color: var(--gwr-dark);
    text-decoration: none;
}
#mainNav > .container > .d-none.d-lg-flex > .dropdown > .btn:hover,
#mainNav > .container > .d-none.d-lg-flex > .btn-gwr-outline:hover {
    background: var(--gwr-sand);
    border-color: var(--gwr-primary);
    color: var(--gwr-primary);
}
#mainNav > .container > .d-none.d-lg-flex > .dropdown > .btn i,
#mainNav > .container > .d-none.d-lg-flex > .btn-gwr-outline i {
    color: var(--gwr-primary); font-size: 1.1rem;
}
/* Menü-Links: konsistente Höhe + Hover */
#mainNav .navbar-nav .nav-link {
    font-size: .82rem;
    font-weight: 600;
    color: var(--gwr-dark);
    border-radius: 8px;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: background .2s, color .2s;
}
#mainNav .navbar-nav .nav-link:hover { background: rgba(var(--gwr-primary-rgb), .08); color: var(--gwr-primary); }
#mainNav .navbar-nav .nav-link.active { color: var(--gwr-primary); font-weight: 700; }
#mobileSearchPanel.open { display:block !important; }
.offcanvas { --bs-offcanvas-zindex: 1080; }
.offcanvas-backdrop { z-index: 1070; }

/* Dropdown FIX: position absolute, kein Layout-Shift */
#mainNav .navbar-nav { flex-wrap: nowrap; }
#mainNav .nav-item.gwr-dropdown { position: relative; }
/* === DROPDOWN-MENU: hart über alles ziehen === */
/* sticky-nav hat z-index 1040 — Bootstrap dropdown default 1000 → Submenu verschwindet hinter Page-Content */
#mainNav .dropdown-menu {
    z-index: 99999 !important;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.18);
    margin-top: .35rem !important;
    padding: .4rem;
    min-width: 220px;
    background: #fff;
}
#mainNav .dropdown-menu .dropdown-item {
    border-radius: 8px;
    font-size: .9rem;
    padding: .6rem .9rem;
    transition: background .15s;
    color: var(--gwr-dark);
    display: flex; align-items: center;
}
#mainNav .dropdown-menu .dropdown-item:hover,
#mainNav .dropdown-menu .dropdown-item:focus {
    background: rgba(var(--gwr-primary-rgb), .1);
    color: var(--gwr-primary);
}
#mainNav .dropdown-menu .dropdown-item i { color: var(--gwr-primary); width: 1.4em; }
#mainNav .gwr-dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important; right: auto !important;
    margin: 0 !important;
    /* unsichtbare Brücke über padding statt margin = bleibt beim Hover-Wandern offen */
    padding: .9rem .4rem .4rem !important;
    background-clip: padding-box;
    transform: none !important;
}
/* Hover-Open für Desktop (Bootstrap-Click bleibt für Touch) + Schließ-Verzögerung */
@media (min-width: 992px) {
    #mainNav .nav-item.gwr-dropdown > .dropdown-menu {
        display: block !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(4px) !important;
        transition: opacity .15s ease, visibility .15s ease, transform .15s ease;
        transition-delay: .25s; /* schließt erst nach 250 ms */
    }
    #mainNav .nav-item.gwr-dropdown:hover > .dropdown-menu,
    #mainNav .nav-item.gwr-dropdown:focus-within > .dropdown-menu,
    #mainNav .nav-item.gwr-dropdown > .dropdown-menu:hover {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) !important;
        transition-delay: 0s;
    }
}
/* Caret-Pfeil unter dem Trigger */
#mainNav .nav-link.dropdown-toggle::after {
    vertical-align: .1em; margin-left: .3em;
    border-top-color: currentColor;
}

/* Social Icons in Navbar (Desktop) */
.nav-social { padding: 0 .3rem; }
.nav-social-link {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    color: var(--gwr-muted);
    font-size: 1.1rem;
    text-decoration: none;
    transition: background .15s, color .15s, transform .15s;
}
.nav-social-link:hover {
    color: var(--gwr-primary);
    background: var(--gwr-sand);
    text-decoration: none;
    transform: translateY(-1px);
}
.nav-social-link-mobile {
    width: 44px; height: 44px;
    font-size: 1.3rem;
    border: 1px solid #e9ecef;
}

/* IVHS-Badge "neu" */
.nav-badge-new {
    display: inline-block;
    background: var(--gwr-accent, #59887E);
    color: #fff;
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .15em .5em;
    border-radius: 999px;
    margin-left: .35em;
    vertical-align: middle;
    line-height: 1.2;
}
#mainNav .nav-link-ivhs.active .nav-badge-new,
#mainNav .nav-link-ivhs:hover .nav-badge-new { background: var(--gwr-primary); }


/* ============================================================
   Fusszeile (views/footer.php) - Block 1 von 2
   ============================================================ */
.footer-social { display: flex; gap: .6rem; }
.footer-social-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #fff !important;
    font-size: 1.2rem;
    text-decoration: none !important;
    transition: background .2s, color .2s, transform .2s;
}
.footer-social-link:hover {
    background: var(--gwr-primary);
    color: #fff !important;
    transform: translateY(-2px);
    text-decoration: none !important;
}
.footer-foerderung-link {
    display: inline-block;
    background: #fff;
    padding: .9rem 1.2rem;
    border-radius: 10px;
    text-decoration: none !important;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.footer-foerderung-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
    text-decoration: none !important;
}
.footer-foerderung-caption {
    font-size: .72rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 500;
}
.footer-foerderung-img {
    max-width: 200px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
@media (max-width: 575.98px) {
    .footer-foerderung-img { max-width: 160px; }
    .footer-foerderung-link { padding: .75rem 1rem; }
}

/* === Footer-Kontakt: Telefon + E-Mail nebeneinander === */
.footer-contact-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .25rem .65rem;
}
@media (min-width: 768px) {
    .footer-contact-row { justify-content: flex-start; }
}
.footer-contact-sep { opacity: .5; }

/* === Mobile-Footer: alles zentriert + kompakter === */
@media (max-width: 767.98px) {
    .gwr-footer { font-size: .9rem; }
    .gwr-footer h6,
    .gwr-footer .h6 { font-size: .82rem; margin-bottom: .55rem; }
    .gwr-footer .small { font-size: .78rem; }
    .gwr-footer ul.list-unstyled { margin-bottom: .25rem; }
    .gwr-footer ul.list-unstyled li { margin-bottom: .2rem; }
    .gwr-footer .footer-social { display: flex; gap: .5rem; }
    .gwr-footer .footer-social-link { width: 38px; height: 38px; font-size: 1.05rem; }
    .gwr-footer .footer-foerderung-caption { font-size: .65rem; }
    .gwr-footer hr { margin: 1rem 0 !important; }
    /* Newsletter-Form kompakter */
    .gwr-footer #newsletterForm .form-control { font-size: .82rem; }
    /* Datenschutz-Label eine Zeile, kein Wrap */
    .gwr-footer .footer-gdpr {
        font-size: .68rem !important;
        white-space: nowrap;
        justify-content: center;
    }
    .gwr-footer .footer-gdpr span { white-space: nowrap; }
}


/* ============================================================
   Fusszeile (views/footer.php) - Block 2 von 2
   ============================================================ */
.gwr-consent{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:1080;max-width:640px;margin:0 auto;
    background:#fff;border:1px solid #e2e6e4;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.18);
    padding:1rem 1.15rem;display:flex;flex-wrap:wrap;align-items:center;gap:.85rem 1rem;
    animation:gwrConsentUp .35s ease both}
@keyframes gwrConsentUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.gwr-consent-text{flex:1 1 260px;font-size:.85rem;line-height:1.5;color:var(--gwr-dark,#1a1a1a)}
.gwr-consent-text strong{display:block;font-size:.92rem;margin-bottom:.15rem;color:var(--gwr-primary,#1B5B3F)}
.gwr-consent-text a{color:var(--gwr-primary,#1B5B3F);text-decoration:underline}
.gwr-consent-actions{display:flex;gap:.5rem;flex:0 0 auto;margin-left:auto}
.gwr-consent-btn{border-radius:999px;padding:.5rem 1.15rem;font-size:.85rem;font-weight:600;
    cursor:pointer;border:1px solid transparent;transition:all .15s}
.gwr-consent-decline{background:#fff;color:var(--gwr-dark,#444);border-color:#dfe3e1}
.gwr-consent-decline:hover{background:#f4f7f5}
.gwr-consent-accept{background:var(--gwr-primary,#1B5B3F);color:#fff}
.gwr-consent-accept:hover{filter:brightness(1.08)}
@media(max-width:480px){.gwr-consent{padding:.85rem;gap:.65rem}.gwr-consent-actions{width:100%;margin-left:0}
    .gwr-consent-btn{flex:1}}


/* ============================================================
   Startseite (modules/pages/home.php)
   ============================================================ */
/* === Suche im Hero (Startseite) ===
   Eine Zeile, die auf dem Telefon genauso funktioniert wie am Schreibtisch:
   das Wort "Suchen" im Knopf verschwindet auf schmalen Schirmen, der Pfeil
   bleibt. Die Trefferliste haengt darunter und wird von app.js gefuellt. */
.home-suche {
    margin: 0 auto;
    max-width: 34rem;
    position: relative;
    display: flex; align-items: center; gap: .5rem;
    background: #fff;
    border: 1.5px solid rgba(var(--gwr-primary-rgb), .18);
    border-radius: 999px;
    padding: .35rem .35rem .35rem 2.9rem;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    transition: border-color .15s, box-shadow .15s;
    text-align: left;
}
.home-suche:focus-within {
    border-color: var(--gwr-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--gwr-primary-rgb), .14), 0 4px 16px rgba(0,0,0,.08);
}
.home-suche-lupe {
    position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
    color: var(--gwr-primary); font-size: 1.05rem; pointer-events: none;
}
.home-suche-feld {
    flex: 1 1 auto; min-width: 0;
    border: 0; background: transparent; outline: none;
    font-size: 1rem; color: var(--gwr-dark);
    padding: .55rem 0; line-height: 1.3;
}
.home-suche-feld::placeholder { color: var(--gwr-muted); opacity: .75; }
/* Das Kreuzchen, das manche Browser in Suchfeldern zeigen, stoert die Pille */
.home-suche-feld::-webkit-search-cancel-button { -webkit-appearance: none; }
.home-suche-knopf {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: .4rem;
    border: 0; border-radius: 999px; cursor: pointer;
    background: var(--gwr-primary); color: #fff;
    font-size: .9rem; font-weight: 600;
    padding: .55rem 1.15rem;
    transition: filter .15s;
}
.home-suche-knopf:hover { filter: brightness(1.1); }

/* Trefferliste */
.home-suche-treffer {
    position: absolute; top: calc(100% + .5rem); left: 0; right: 0;
    background: #fff; border: 1px solid #e8ebe9; border-radius: 16px;
    box-shadow: 0 14px 40px rgba(0,0,0,.16);
    max-height: 62vh; overflow-y: auto; z-index: 1055;
    text-align: left;
}
.home-suche-treffer .suggestion-item:first-child { border-top-left-radius: 16px; border-top-right-radius: 16px; }
.home-suche-treffer .suggestion-item:hover { background: var(--gwr-sand); }
.home-suche-treffer > a:last-child { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }

@media (max-width: 575.98px) {
    .home-suche { padding-left: 2.5rem; }
    .home-suche-lupe { left: .9rem; font-size: .95rem; }
    .home-suche-feld { font-size: .95rem; }
    /* Auf dem Telefon zaehlt jeder Millimeter: nur noch der Pfeil */
    .home-suche-knopf { padding: .55rem .8rem; }
    .home-suche-knopf-text { display: none; }
    .home-suche-treffer { max-height: 55vh; }
}
/* Bei grosser Schrift darf die Zeile umbrechen statt zu quetschen */
html[data-schrift="sehrgross"] .home-suche { flex-wrap: wrap; border-radius: 20px; }
html[data-schrift="sehrgross"] .home-suche-knopf { width: 100%; justify-content: center; }

/* === HERO-CARD (Standard, kein Video) === */
.gwr-hero-card {
    display: inline-block;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 22px;
    padding: 2.5rem 3rem 2.2rem;
    box-shadow: 0 12px 36px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
    max-width: 760px;
    width: 92%;
    margin: 0 auto;
    color: var(--gwr-dark);
}
/* === BLURBOX (legacy, nur falls Video aktiv) === */
.has-video .gwr-hero-card {
    background: rgba(0,0,0,.28);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 4px 18px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.18);
    color: #fff;
}
@media (max-width: 767.98px) {
    .gwr-hero-card { padding: 1.4rem 1.15rem 1.35rem; border-radius: 16px; }
}

/* === UNSERE THEMEN — 2 Spalten === */
.themen-section { background: linear-gradient(180deg, #fafaf8, #fff); }
.themen-block {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem 1.5rem 1.25rem;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 16px rgba(0,0,0,.04);
    height: 100%;
    transition: box-shadow .25s, transform .25s;
}
.themen-block:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
.themen-block-wb   { border-top: 4px solid var(--gwr-primary); }
.themen-block-ivhs { border-top: 4px solid #3B7771; }
.themen-header {
    display: flex; justify-content: space-between; align-items: center;
    gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.themen-pill {
    display: inline-flex; align-items: center; gap: .35em;
    padding: .35rem .85rem; border-radius: 300px;
    font-size: .82rem; font-weight: 600;
    color: #fff;
}
.themen-pill-wb   { background: var(--gwr-primary); }
.themen-pill-ivhs { background: #3B7771; }
.themen-link {
    font-size: .8rem; color: var(--gwr-primary); text-decoration: none; font-weight: 500;
    display: inline-flex; align-items: center; gap: .25em;
}
.themen-link:hover { text-decoration: underline; }
.themen-link-ivhs { color: #3B7771; }
.themen-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .6rem;
}
.themen-tile {
    display: flex; align-items: center; gap: .65rem;
    padding: .85rem 1rem;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-left: 3px solid var(--c, var(--gwr-primary));
    text-decoration: none;
    color: var(--gwr-dark);
    transition: all .2s;
    min-height: 56px;
    position: relative;
}
.themen-tile:hover {
    border-color: var(--c, var(--gwr-primary));
    background: linear-gradient(90deg, color-mix(in srgb, var(--c, var(--gwr-primary)) 8%, #fff), #fff);
    box-shadow: 0 4px 10px rgba(0,0,0,.06);
    color: var(--gwr-dark);
    transform: translateX(2px);
}
.themen-icon { color: var(--c, var(--gwr-primary)); font-size: 1.25rem; flex-shrink: 0; }
.themen-name { flex: 1; font-size: .88rem; font-weight: 500; line-height: 1.25; }
.themen-count {
    background: color-mix(in srgb, var(--c, var(--gwr-primary)) 12%, #fff);
    color: var(--c, var(--gwr-primary));
    padding: .15em .55em; border-radius: 300px;
    font-size: .68rem; font-weight: 600;
}
@media (max-width: 575.98px) {
    .themen-grid { grid-template-columns: 1fr; }
    .themen-block { padding: 1.15rem 1rem 1rem; }
}

/* === NÄCHSTE TERMINE BLÖCKE === */
.upcoming-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1rem;
}
.upcoming-block {
    display: flex; align-items: stretch; gap: 0;
    background: #fff;
    border: 1px solid #e9ecef;
    border-left: 5px solid var(--accent, var(--gwr-primary));
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: var(--gwr-dark);
    transition: all .25s;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    position: relative;
}
.upcoming-block:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0,0,0,.1);
    color: var(--gwr-dark);
    text-decoration: none;
}
.ub-date {
    background: linear-gradient(135deg, var(--accent, var(--gwr-primary)), color-mix(in srgb, var(--accent, var(--gwr-primary)) 70%, #000));
    color: #fff;
    padding: 1rem .85rem;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    min-width: 80px; flex-shrink: 0;
    line-height: 1;
}
.ub-day { font-size: 1.85rem; font-weight: 700; letter-spacing: -.02em; }
.ub-mon { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; margin-top: .15rem; opacity: .92; }
.ub-year { font-size: .58rem; opacity: .7; margin-top: .15rem; }
.ub-body {
    flex: 1; padding: .85rem 1rem;
    display: flex; flex-direction: column; gap: .4rem;
    min-width: 0;
}
.ub-badges {
    display: flex; gap: .3rem; flex-wrap: wrap;
    align-items: center;
}
.ub-prog {
    display: inline-flex; align-items: center; gap: .25em;
    font-size: .65rem; font-weight: 600;
    padding: .18em .55em; border-radius: 300px;
    background: var(--gwr-sand); color: var(--gwr-primary);
    text-transform: uppercase; letter-spacing: .03em;
}
.ub-prog-ivhs { background: rgba(59,119,113,.12); color: #3B7771; }
.ub-cat {
    font-size: .62rem; font-weight: 600;
    padding: .18em .55em; border-radius: 4px;
    color: #fff; text-transform: uppercase; letter-spacing: .02em;
}
.ub-online {
    font-size: .62rem; font-weight: 700;
    padding: .18em .55em; border-radius: 300px;
    background: linear-gradient(90deg, #0d6efd, #20c997); color: #fff;
    display: inline-flex; align-items: center; gap: .2em;
    text-transform: uppercase; letter-spacing: .05em;
}
.ub-title {
    font-size: .98rem; font-weight: 600;
    margin: 0; line-height: 1.3;
    color: var(--gwr-dark);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ub-meta {
    display: flex; gap: .8rem; flex-wrap: wrap;
    font-size: .73rem; color: var(--gwr-muted);
}
.ub-meta i { color: var(--accent, var(--gwr-primary)); margin-right: .2em; }
.ub-arrow {
    align-self: center; padding: 0 1rem;
    color: var(--accent, var(--gwr-primary));
    opacity: .35; font-size: 1.1rem;
    transition: opacity .2s, transform .2s;
}
.upcoming-block:hover .ub-arrow { opacity: 1; transform: translateX(3px); }
@media (max-width: 575.98px) {
    .upcoming-blocks { grid-template-columns: 1fr; gap: .7rem; }
    .ub-date { min-width: 64px; padding: .8rem .55rem; }
    .ub-day { font-size: 1.5rem; }
    .ub-body { padding: .7rem .8rem; }
    .ub-title { font-size: .9rem; }
    .ub-arrow { display: none; }
}


/* ============================================================
   Ueber uns (modules/pages/about.php) - Block 1 von 2
   ============================================================ */
.team-member-card {
    background: #fff; border-radius: 12px; overflow: hidden;
    border: 1px solid #e9ecef;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    height: 100%;
}
.team-member-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(var(--gwr-primary-rgb), .15);
    border-color: var(--gwr-primary);
}
.team-member-photo {
    width: 100%; aspect-ratio: 1/1;
    background: #fff;
    overflow: hidden; position: relative;
}
.team-member-photo img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: grayscale(100%) contrast(0.95);
    transition: filter 900ms cubic-bezier(.4, 0, .2, 1), transform 900ms cubic-bezier(.4, 0, .2, 1);
}
.team-member-card:hover .team-member-photo img {
    filter: grayscale(0%) contrast(1);
    transform: scale(1.04);
}
.team-member-ph {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    font-size: 2.4rem; font-weight: 700;
    color: var(--gwr-primary); letter-spacing: .04em;
}
.team-member-body { padding: 1rem; text-align: center; }
.team-member-name { font-size: 1rem; font-weight: 700; margin: 0 0 .15rem; color: var(--gwr-dark); }
.team-member-role { font-size: .82rem; color: var(--gwr-primary); font-weight: 500; min-height: 1.2em; }
.team-member-contact { margin-top: .55rem; display: flex; gap: .65rem; justify-content: center; }
.team-member-contact a {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(var(--gwr-primary-rgb), .1);
    color: var(--gwr-primary);
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; transition: background .15s;
}
.team-member-contact a:hover { background: var(--gwr-primary); color: #fff; }
.team-member-bio { font-size: .78rem; color: var(--gwr-muted); margin: .65rem 0 0; line-height: 1.4; }
@media (max-width: 575.98px) {
    .team-member-name { font-size: .9rem; }
    .team-member-role { font-size: .72rem; }
    .team-member-body { padding: .75rem; }
}


/* ============================================================
   Ueber uns (modules/pages/about.php) - Block 2 von 2
   ============================================================ */
.about-tabs { gap: .2rem; padding: .25rem 0; flex-wrap: nowrap; overflow-x: auto; }
.about-tabs .nav-link {
    color: var(--gwr-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: .65rem 1rem;
    font-size: .9rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color .2s, border-color .2s;
}
.about-tabs .nav-link:hover { color: var(--gwr-primary); }
.about-tabs .nav-link.active {
    color: var(--gwr-primary);
    border-bottom-color: var(--gwr-primary);
    background: transparent;
}

/* === Über-uns: Statuten-Download + gestaltete Info-Boxen === */
/* Dezenter „Soft"-Download-Button: heller Grund, dunkler Text, roter PDF-Akzent */
.about-download {
    display: inline-flex; align-items: center; gap: .5rem;
    background: #fff; color: var(--gwr-dark, #1f2937) !important;
    font-weight: 600; font-size: .92rem; text-decoration: none !important;
    padding: .5rem .95rem; border-radius: 8px;
    border: 1px solid #e2e6e4;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.about-download:hover {
    background: var(--gwr-sand, #f4f7f5);
    border-color: rgba(var(--gwr-primary-rgb), .35);
    color: var(--gwr-primary) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.about-download i { font-size: 1.15rem; color: #d0362b; }  /* PDF-Rot */
.about-quote {
    border-left: 4px solid var(--gwr-primary);
    background: var(--gwr-sand);
    padding: 1.1rem 1.4rem;
    margin: 1.5rem 0;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--gwr-dark);
    border-radius: 0 8px 8px 0;
    line-height: 1.55;
}

/* Partner-Seite */
.partner-section-title {
    color: var(--gwr-primary);
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: .2rem;
    border-bottom: 2px solid var(--gwr-sand);
    padding-bottom: .35rem;
}
.partner-section-lead {
    font-size: .95rem;
    margin-top: .35rem;
}
.partner-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #e9ecef;
    border-left: 4px solid var(--gwr-primary);
    border-radius: 10px;
    padding: 1.1rem 1.1rem 1rem;
    color: inherit;
    text-decoration: none !important;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.partner-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    color: inherit;
}
.partner-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    margin-bottom: .9rem;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #f1f3f5;
    padding: 1rem;
}
.partner-logo {
    max-width: 100%;
    max-height: 90px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.partner-info { display: flex; flex-direction: column; gap: .35rem; }
.partner-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--gwr-primary);
    margin: 0;
}
.partner-desc {
    font-size: .9rem;
    color: var(--gwr-muted, #6c757d);
    margin: 0;
    line-height: 1.5;
}

/* Kompakte Gemeinde-Kacheln */
.partner-card-compact {
    align-items: center;
    text-align: center;
    border-left-width: 1px;
    padding: .85rem .6rem;
}
.partner-card-compact .partner-logo-wrap {
    height: 90px;
    width: 100%;
    margin-bottom: .55rem;
    background: #fff;
    border: 1px solid #f1f3f5;
    padding: .75rem;
}
.partner-card-compact .partner-logo { max-height: 70px; }
/* Primär-Logo (APBZ) größer */
.partner-page-title { color: var(--gwr-primary); font-weight: 700; }
.partner-card-primary .partner-logo-wrap { height: 150px; padding: 1.2rem; border: 0; }
.partner-card-primary .partner-logo { max-height: 130px; }
.partner-card-funded .partner-logo-wrap { height: 90px; border: 0; padding: .5rem; }
.partner-card-funded .partner-logo { max-height: 70px; }
.partner-funded-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.partner-name-compact {
    font-size: .78rem;
    color: var(--gwr-muted, #6c757d);
    font-weight: 500;
    line-height: 1.3;
}
.partner-card-compact:hover .partner-name-compact {
    color: var(--gwr-primary);
}

@media (max-width: 575.98px) {
    .partner-logo-wrap { height: 100px; padding: .65rem; }
    .partner-logo { max-height: 75px; }
    .partner-card-compact .partner-logo-wrap { height: 75px; padding: .5rem; }
    .partner-card-compact .partner-logo { max-height: 55px; }
    .partner-section-title { font-size: 1.2rem; }
}


/* ============================================================
   Kontakt (modules/pages/contact.php)
   ============================================================ */
/* ===== KONTAKT ===== */
.contact-section { padding: 1.5rem 0 3rem; background: linear-gradient(180deg, var(--gwr-sand, #f7f5f2) 0%, #fff 220px); }

/* --- Schnellaktionen (Handy) --- */
.quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 1rem; }
.qa-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
    min-height: 72px; padding: .6rem .3rem;
    background: #fff; border: 1px solid #e6e9e7; border-radius: 14px;
    color: var(--gwr-dark, #222); text-decoration: none;
    font-size: .8rem; font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.qa-btn i { font-size: 1.25rem; color: var(--gwr-primary); }
.qa-btn:active { transform: scale(.97); }
.qa-btn:hover { border-color: rgba(var(--gwr-primary-rgb), .35); box-shadow: 0 4px 12px rgba(0,0,0,.07); color: var(--gwr-primary); }

/* --- Karten --- */
.contact-info-card, .contact-form-card {
    background: #fff; border: 1px solid #e9ecef; border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.contact-info-card { padding: 1.25rem; }
.contact-form-card { padding: 1.25rem; }

.contact-info-header { display: flex; align-items: center; gap: .8rem; padding-bottom: 1rem; margin-bottom: .5rem; border-bottom: 1px solid #f0f0f0; }
.cih-icon {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--gwr-primary-rgb), .1); color: var(--gwr-primary); font-size: 1.3rem;
}
.contact-info-header strong { display: block; font-size: 1.02rem; line-height: 1.3; }
.contact-info-header small { color: var(--gwr-muted); font-size: .74rem; line-height: 1.35; display: block; }

.contact-info-list { list-style: none; margin: 0; padding: 0; }
.contact-info-list li {
    display: flex; gap: .8rem; align-items: flex-start;
    padding: .8rem 0; border-bottom: 1px solid #f5f5f5;
    font-size: .92rem; line-height: 1.5;
}
.contact-info-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-info-list li > i { color: var(--gwr-primary); font-size: .95rem; margin-top: .3rem; width: 18px; flex-shrink: 0; text-align: center; }
.ci-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--gwr-muted, #6b7280); margin-bottom: .1rem; }
.contact-info-list li a { color: var(--gwr-dark); text-decoration: none; font-weight: 500; }
.contact-info-list li a:hover { color: var(--gwr-primary); }
.ci-link { display: inline-flex; align-items: center; gap: .3rem; margin-top: .35rem; font-size: .82rem; color: var(--gwr-primary) !important; font-weight: 600 !important; }
.ci-link i { transition: transform .15s; }
.ci-link:hover i { transform: translateX(3px); }

.hours { display: grid; grid-template-columns: auto 1fr; gap: .15rem .9rem; font-size: .88rem; }
.hours span { color: var(--gwr-muted, #6b7280); }
.hours strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.hours em { font-style: normal; color: var(--gwr-muted, #6b7280); }

.map-wrapper { position: relative; padding-bottom: 56.25%; border-radius: 16px; overflow: hidden; border: 1px solid #e9ecef; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.map-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* --- Formular --- */
.cfc-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; }
.cfc-icon {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--gwr-primary-rgb), .1); color: var(--gwr-primary); font-size: 1.2rem;
}
.cfc-head h2 { font-size: 1.15rem; margin: 0; line-height: 1.25; }
.cfc-head p { margin: 0; font-size: .84rem; color: var(--gwr-muted, #6b7280); }

.contact-form-card .form-control {
    font-size: 16px;              /* 16px verhindert Auto-Zoom auf iPhones */
    min-height: 48px;             /* komfortable Tap-Fläche */
    border-radius: 10px;
    border: 1px solid #dfe3e1;
    padding: .6rem .85rem;
    transition: border-color .15s, box-shadow .15s;
}
.contact-form-card textarea.form-control { min-height: 120px; }
.contact-form-card .form-control:focus {
    border-color: var(--gwr-primary);
    box-shadow: 0 0 0 3px rgba(var(--gwr-primary-rgb), .13);
}
.contact-form-card .form-control::placeholder { color: #9aa3a0; }

.gdpr-check { display: flex; align-items: flex-start; gap: .6rem; margin: .35rem 0 0; font-size: .85rem; line-height: 1.45; }
.gdpr-check .form-check-input { width: 20px; height: 20px; margin: .1rem 0 0; flex-shrink: 0; }
.gdpr-check .form-check-input:checked { background-color: var(--gwr-primary); border-color: var(--gwr-primary); }
.gdpr-check .form-check-label { margin: 0; }

.form-foot { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: 1.1rem; }
.form-foot .btn { border-radius: 10px; padding: .7rem 1.4rem; font-weight: 600; }
.form-foot small { font-size: .78rem; }

#contactMsg.ok  { color: #198754; font-weight: 600; }
#contactMsg.err { color: #c60a0a; font-weight: 600; }

/* --- Mobil --- */
@media (max-width: 767.98px) {
    .contact-section { padding: 1rem 0 2rem; }
    .contact-info-card, .contact-form-card { padding: 1.05rem; border-radius: 14px; }
    .map-wrapper { padding-bottom: 62%; border-radius: 14px; }
    .cfc-head h2 { font-size: 1.05rem; }
    .form-foot { flex-direction: column-reverse; align-items: stretch; }
    .form-foot .btn { width: 100%; padding: .85rem 1rem; font-size: 1rem; }
    .form-foot small { text-align: center; }
}


/* ============================================================
   Kalender (modules/pages/calendar.php)
   ============================================================ */
.cal-list { display:flex; flex-direction:column; gap:.5rem; }
.cal-item {
    display:flex; align-items:center; gap:.75rem;
    padding:.6rem .75rem;
    background:#fff; border:1px solid #e9ecef; border-radius:10px;
    box-shadow: 0 1px 4px rgba(0,0,0,.03);
    transition: all .2s; text-align:left;
}
.cal-item:hover { border-color: var(--gwr-primary); transform: translateY(-1px); text-decoration:none; }
.cal-date {
    color:#fff; border-radius:8px;
    padding:.4rem .55rem; text-align:center; line-height:1.1;
    min-width:56px; flex-shrink:0;
}
.cal-wd  { font-size:.6rem; text-transform:uppercase; opacity:.85; letter-spacing:.04em; }
.cal-day { font-size:1.35rem; font-weight:700; margin:.05rem 0; }
.cal-mon { font-size:.6rem; text-transform:uppercase; opacity:.85; }
.cal-info { flex:1; min-width:0; text-align:left; hyphens:none; word-break:keep-all; }
.cal-title {
    font-size:.92rem; font-weight:600; line-height:1.25;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cal-meta {
    font-size:.74rem; color: var(--gwr-muted);
    display:flex; flex-wrap:wrap; gap:.4rem .8rem;
    margin-top:.2rem;
}
.cal-meta i { color: var(--gwr-primary); }
.cal-chev { color:#bbb; flex-shrink:0; }
@media (max-width: 575.98px) {
    .cal-item { padding:.5rem; gap:.5rem; }
    .cal-date { min-width:48px; padding:.3rem .4rem; }
    .cal-day { font-size:1.15rem; }
    .cal-title { font-size:.88rem; }
    .cal-loc { display:block; width:100%; }
}


/* ============================================================
   Gutschein kaufen (modules/pages/voucher_buy.php)
   ============================================================ */
.voucher-value-tile {
    display: block; cursor: pointer;
    border: 2px solid #e9ecef; border-radius: 10px;
    padding: .8rem .5rem; text-align: center;
    font-weight: 700; color: var(--gwr-dark);
    transition: all .15s;
    background: #fff;
}
.voucher-value-tile input { display: none; }
.voucher-value-tile:has(input:checked) {
    border-color: var(--gwr-primary);
    background: rgba(var(--gwr-primary-rgb), .08);
    color: var(--gwr-primary);
}
.voucher-preview-card {
    background: #fff; border-radius: 14px; padding: 1.5rem;
    border: 2px dashed var(--gwr-primary);
}


/* ============================================================
   Sommerangebote, Uebersicht (modules/pages/sommer.php)
   ============================================================ */
.sommer-header { background: linear-gradient(135deg, #F39200 0%, #F8B834 100%); color: #fff; }
.sommer-header h1, .sommer-header .lead { color: #fff; }
.sommer-section { padding: 2rem 0 3rem; }

.sommer-notice {
    display: flex; gap: .9rem; align-items: flex-start;
    background: #fff8ec; border: 1px solid #f3d9a8; border-left: 4px solid #F39200;
    border-radius: 12px; padding: 1rem 1.15rem; margin-bottom: 1.5rem;
}
.sommer-notice > i { color: #F39200; font-size: 1.3rem; flex-shrink: 0; margin-top: .1rem; }
.sommer-notice strong { display: block; margin-bottom: .2rem; }
.sommer-notice span { display: block; font-size: .9rem; color: #6b5a3e; line-height: 1.5; }
.sommer-notice-link { display: inline-flex; align-items: center; gap: .3rem; margin-top: .5rem; font-size: .88rem; font-weight: 600; color: var(--gwr-primary); text-decoration: none; }
.sommer-notice-link:hover i { transform: translateX(3px); }
.sommer-notice-link i { transition: transform .15s; }

.sommer-intro { margin-bottom: 2rem; }
.sommer-intro p { font-size: 1.02rem; line-height: 1.7; color: #444; max-width: 65ch; }
.sommer-facts { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.1rem; }
.sommer-facts > div {
    background: #fff; border: 1px solid #e9ecef; border-radius: 12px;
    padding: .7rem 1.1rem; min-width: 120px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.sommer-facts strong { display: block; font-size: 1.25rem; color: #F39200; line-height: 1.1; }
.sommer-facts span { font-size: .76rem; color: var(--gwr-muted, #6b7280); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }

/* === Filter === */
.sommer-filters { background: #fff; border: 1px solid #e9ecef; border-radius: 14px; padding: .9rem 1rem; margin-bottom: 1.25rem; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.sf-cats { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; }
.sf-chip {
    --c: var(--gwr-primary);
    border: 1.5px solid #e2e6e4; background: #fff; color: var(--gwr-dark, #222);
    border-radius: 999px; padding: .35rem .85rem; font-size: .84rem; font-weight: 600;
    cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; gap: .4rem;
}
.sf-chip span { font-size: .72rem; opacity: .6; font-weight: 600; }
.sf-chip:hover { border-color: var(--c); color: var(--c); }
.sf-chip.active { background: var(--c); border-color: var(--c); color: #fff; }
.sf-chip.active span { opacity: .85; }
.sf-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sf-search { position: relative; flex: 1 1 200px; min-width: 160px; }
.sf-search i { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: #9aa3a0; font-size: .85rem; }
.sf-search input {
    width: 100%; height: 40px; border: 1px solid #dfe3e1; border-radius: 9px;
    padding: .4rem .7rem .4rem 2rem; font-size: 16px; background: #fff;
}
.sf-search input:focus, .sf-row select:focus { outline: 0; border-color: var(--gwr-primary); box-shadow: 0 0 0 3px rgba(var(--gwr-primary-rgb), .13); }
.sf-row select {
    height: 40px; border: 1px solid #dfe3e1; border-radius: 9px;
    padding: .35rem 2rem .35rem .7rem; font-size: .88rem; background: #fff; cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7280' d='M4.5 6l3.5 4 3.5-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .5rem center; background-size: 16px;
}
.sf-result { font-size: .8rem; color: var(--gwr-muted, #6b7280); margin-top: .6rem; font-weight: 600; }
.sf-empty { text-align: center; padding: 2.5rem 1rem; color: var(--gwr-muted, #6b7280); }
.sf-empty i { font-size: 2rem; opacity: .35; display: block; margin-bottom: .5rem; }
.sf-empty p { margin-bottom: .8rem; }

/* === Kacheln: Bild links, Text rechts, ganzes Bild ohne Beschnitt === */
.sommer-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: .7rem; }
.som-card {
    display: flex; align-items: stretch; gap: 0;
    background: #fff; border: 1px solid #e9ecef; border-radius: 12px;
    overflow: hidden; text-decoration: none; color: inherit;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    transition: transform .16s, box-shadow .16s, border-color .16s;
}
.som-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.10); border-color: var(--c); }
.som-thumb {
    flex: 0 0 118px; width: 118px;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border-right: 1px solid #f1f1f1; padding: .45rem;
}
.som-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.som-thumb-empty { background: #fafafa; }
.som-thumb-empty i { font-size: 1.6rem; color: var(--c); opacity: .55; }
.som-body { flex: 1; min-width: 0; padding: .7rem .85rem; display: flex; flex-direction: column; gap: .25rem; justify-content: center; }
.som-cat { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--c); display: inline-flex; align-items: center; gap: .3rem; }
.som-body h3 { font-size: .95rem; margin: 0; line-height: 1.3; font-weight: 700; }
.som-card:hover h3 { color: var(--c); }
.som-meta { display: flex; flex-direction: column; gap: .12rem; margin-top: .15rem; }
.som-meta span { font-size: .78rem; color: var(--gwr-muted, #6b7280); display: flex; align-items: center; gap: .35rem; line-height: 1.4; }
.som-meta span i { color: var(--c); font-size: .78rem; flex-shrink: 0; }
.som-meta em { font-style: normal; opacity: .75; font-size: .72rem; }
.som-arrow { align-self: center; color: #c9cfcc; padding-right: .7rem; font-size: .9rem; transition: transform .15s, color .15s; }
.som-card:hover .som-arrow { color: var(--c); transform: translateX(3px); }

.sommer-cta { background: var(--gwr-sand, #f7f5f2); border-radius: 16px; padding: 2rem 1.5rem; text-align: center; margin-top: 1rem; }
.sommer-cta h2 { font-size: 1.35rem; margin: 0 0 .4rem; }
.sommer-cta p { color: #5b6360; margin: 0 0 1.2rem; }
.sommer-cta-btns { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

@media (max-width: 767.98px) {
    .sommer-section { padding: 1rem 0 2rem; }
    .sommer-list { grid-template-columns: 1fr; gap: .6rem; }
    .som-thumb { flex-basis: 92px; width: 92px; }
    .som-body { padding: .6rem .7rem; }
    .som-body h3 { font-size: .9rem; }
    .som-meta span { font-size: .74rem; }
    .sommer-filters { padding: .7rem .75rem; border-radius: 12px; position: sticky; top: 52px; z-index: 20; }
    .sf-cats { gap: .3rem; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .2rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .sf-cats::-webkit-scrollbar { display: none; }
    .sf-chip { white-space: nowrap; font-size: .82rem; padding: .45rem .8rem; }
    .sf-row { gap: .4rem; }
    .sf-search { flex: 1 1 100%; }
    .sf-row select { flex: 1 1 calc(50% - .2rem); min-width: 0; font-size: .82rem; }
    .sf-result { margin-top: .45rem; }
    /* Einleitung kompakt halten, damit die Angebote schneller sichtbar sind */
    .sommer-intro { margin-bottom: 1.1rem; }
    .sommer-intro p { font-size: .9rem; line-height: 1.6; margin-bottom: .7rem; }
    .sommer-notice { padding: .8rem .9rem; margin-bottom: 1rem; border-radius: 10px; }
    .sommer-notice span { font-size: .85rem; }
    .sommer-facts { gap: .45rem; margin-top: .8rem; }
    .sommer-facts > div { flex: 1; min-width: 0; padding: .5rem .55rem; border-radius: 10px; }
    .sommer-facts strong { font-size: .98rem; }
    .sommer-facts span { font-size: .62rem; letter-spacing: .03em; }
    .sommer-cta { padding: 1.5rem 1.1rem; }
    .sommer-cta-btns .btn { width: 100%; }
}


/* ============================================================
   Sommerangebot, Detailseite (modules/pages/sommer_show.php)
   ============================================================ */
.sd-hero { background: var(--gwr-sand, #f7f5f2); padding: 1.5rem 0 1.75rem; border-bottom: 3px solid var(--c); }
.sd-crumb { font-size: .82rem; color: var(--gwr-muted, #6b7280); margin-bottom: .5rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.sd-crumb a { color: var(--gwr-primary); text-decoration: none; font-weight: 600; }
.sd-crumb i { font-size: .65rem; opacity: .5; }
.sd-hero h1 { margin: 0; font-size: 2rem; line-height: 1.2; }
.sd-hero .lead { margin: .4rem 0 0; color: var(--c); font-weight: 600; font-size: 1.02rem; }
.sd-full { display: inline-block; vertical-align: middle; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: #fdeaea; color: #c0392b; padding: .25rem .6rem; border-radius: 6px; }

.sd-section { padding: 2rem 0 3rem; }
.sd-img { width: 100%; height: auto; border-radius: 14px; margin-bottom: 1.25rem; box-shadow: 0 2px 12px rgba(0,0,0,.07); }
.sd-text p { font-size: 1rem; line-height: 1.75; color: #444; margin-bottom: 1rem; }
.sd-note { display: flex; gap: .7rem; background: #fff8ec; border: 1px solid #f3d9a8; border-radius: 12px; padding: .9rem 1rem; font-size: .9rem; line-height: 1.6; }
.sd-note i { color: #F39200; font-size: 1.1rem; flex-shrink: 0; margin-top: .1rem; }

.sd-card { background: #fff; border: 1px solid #e9ecef; border-top: 3px solid var(--c); border-radius: 14px; padding: 1.1rem 1.2rem; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.sd-card h2 { font-size: 1rem; margin: 0 0 .8rem; display: flex; align-items: center; gap: .45rem; }
.sd-card h2 i { color: var(--c); }
.sd-terms { list-style: none; margin: 0; padding: 0; }
.sd-terms li { padding: .6rem 0; border-bottom: 1px solid #f2f2f2; }
.sd-terms li:last-child { border-bottom: 0; padding-bottom: 0; }
.sd-term-date { font-weight: 600; font-size: .93rem; font-variant-numeric: tabular-nums; }
.sd-term-label { font-size: .8rem; color: var(--c); font-weight: 600; margin-top: .1rem; }
.sd-term-loc { font-size: .82rem; color: var(--gwr-muted, #6b7280); margin-top: .15rem; }

.sd-facts { list-style: none; margin: 0; padding: 0; }
.sd-facts li { display: flex; gap: .7rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px solid #f5f5f5; font-size: .9rem; }
.sd-facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.sd-facts li i { color: var(--c); width: 18px; text-align: center; flex-shrink: 0; margin-top: .2rem; }
.sd-facts span { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--gwr-muted, #6b7280); }

.sd-closed { background: var(--gwr-sand, #f7f5f2); border-radius: 14px; padding: 1.1rem 1.2rem; }
.sd-closed strong { display: block; margin-bottom: .3rem; }
.sd-closed p { font-size: .88rem; color: #5b6360; margin: 0 0 .8rem; }
.sd-closed-btns { display: flex; gap: .5rem; flex-wrap: wrap; }

.sd-more { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #eee; }
.sd-more h2 { font-size: 1.15rem; margin-bottom: .9rem; }
.sd-more-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.sd-more-item {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    background: #fff; border: 1px solid #e9ecef; border-radius: 10px;
    padding: .7rem .9rem; font-size: .9rem; font-weight: 500;
    color: var(--gwr-dark); text-decoration: none; transition: all .15s;
}
.sd-more-item i { color: var(--gwr-primary); transition: transform .15s; }
.sd-more-item:hover { border-color: var(--gwr-primary); color: var(--gwr-primary); box-shadow: 0 3px 10px rgba(0,0,0,.06); }
.sd-more-item:hover i { transform: translateX(3px); }
.sd-back { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--gwr-primary); text-decoration: none; font-size: .92rem; }

@media (max-width: 767.98px) {
    .sd-hero h1 { font-size: 1.5rem; }
    .sd-section { padding: 1.25rem 0 2rem; }
    .sd-more-list { grid-template-columns: 1fr; }
    .sd-closed-btns .btn { flex: 1; }
}


/* ============================================================
   Regionalentwicklung (modules/pages/regionalentwicklung.php)
   ============================================================ */
.re-quote {
    border-left: 4px solid var(--gwr-primary);
    background: var(--gwr-sand);
    padding: 1.1rem 1.4rem;
    margin: 1.5rem 0;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--gwr-dark);
    border-radius: 0 8px 8px 0;
    line-height: 1.55;
}
.re-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.03);
    transition: transform .15s, box-shadow .15s, border-color .15s;
    color: var(--gwr-dark);
}
.re-card-img {
    width: 100%; min-height: 150px;
    overflow: hidden; background: #fff;
    border-bottom: 1px solid #f1f3f5;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.re-card-img img { max-width: 100%; max-height: 130px; width: auto; height: auto; object-fit: contain; display: block; }
.re-card-body { padding: 1.1rem 1.25rem 1.25rem; }
.re-card:not(:has(.re-card-img)) .re-card-body { padding: 1.25rem; }
a.re-card:hover {
    transform: translateY(-2px);
    border-color: var(--gwr-primary);
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
    text-decoration: none;
}
.re-card-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 10px;
    background: rgba(var(--gwr-primary-rgb), .1);
    color: var(--gwr-primary);
    font-size: 1.4rem;
    margin-bottom: .75rem;
}
.re-card-title {
    color: var(--gwr-primary);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: .15rem;
}
.re-card-lead {
    font-size: .82rem;
    color: var(--gwr-muted);
    font-weight: 500;
    margin-bottom: .6rem;
}
.re-card-text {
    font-size: .9rem;
    line-height: 1.55;
    margin-bottom: .6rem;
    color: var(--gwr-dark);
}
.re-card-cta {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--gwr-primary);
}
a.re-card:hover .re-card-cta i { transform: translateX(3px); }
.re-card-cta i { transition: transform .15s; }
@media (max-width: 575.98px) {
    .re-card { padding: 1rem; }
    .re-card-icon { width: 38px; height: 38px; font-size: 1.2rem; }
}


/* ============================================================
   EU-Programme (modules/pages/euprogramme.php)
   ============================================================ */
/* Programm-Cards */
.eu-prog {
    background: #fff;
    border: 1px solid #e9ecef;
    border-left: 4px solid var(--gwr-primary);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.03);
    transition: transform .15s, box-shadow .15s;
}
/* Logo-Bereich: weißer Hintergrund, Logo zentriert, KEIN Crop */
.eu-prog-img {
    position: relative;
    width: 100%; min-height: 140px;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid #f1f3f5;
    display: flex; align-items: center; justify-content: center;
    padding: 1.25rem 1rem;
}
.eu-prog-img img {
    max-width: 100%; max-height: 100px;
    width: auto; height: auto;
    object-fit: contain; display: block;
}
.eu-prog-logo-overlay {
    position: absolute !important;
    bottom: 8px; right: 8px;
    max-height: 36px !important; width: auto !important;
    background: #fff;
    padding: 3px 6px; border-radius: 4px;
    border: 1px solid #f1f3f5;
}
.eu-prog-body { padding: 1.25rem; }
.eu-prog:not(:has(.eu-prog-img)) .eu-prog-body { padding: 1.25rem; }
.eu-prog:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.eu-prog-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
.eu-prog-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 10px;
    background: rgba(var(--gwr-primary-rgb), .1);
    color: var(--gwr-primary);
    font-size: 1.4rem;
}
.eu-prog-badge {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--gwr-sand);
    color: var(--gwr-primary);
    padding: .25em .65em;
    border-radius: 999px;
}
.eu-prog-title { color: var(--gwr-primary); font-weight: 700; font-size: 1.15rem; margin: 0; }
.eu-prog-sub  { font-size: .82rem; color: var(--gwr-muted); font-weight: 500; margin-bottom: .6rem; }
.eu-prog-text { font-size: .9rem; line-height: 1.6; color: var(--gwr-dark); margin-bottom: .6rem; }
.eu-prog-list {
    list-style: none; padding: 0; margin: .5rem 0 0;
    border-top: 1px dashed #e9ecef; padding-top: .6rem;
}
.eu-prog-list li {
    font-size: .85rem;
    padding: .15rem 0 .15rem 1.1rem;
    position: relative;
    color: var(--gwr-dark);
}
.eu-prog-list li::before {
    content: ""; position: absolute; left: 0; top: .55em;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--gwr-primary);
}

/* Projekt-Cards */
.eu-proj {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.03);
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.eu-proj:hover { border-color: var(--gwr-primary); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.06); }
.eu-proj-img {
    width: 100%; min-height: 130px;
    overflow: hidden; background: #fff;
    border-bottom: 1px solid #f1f3f5;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.eu-proj-img img { max-width: 100%; max-height: 110px; width: auto; height: auto; object-fit: contain; display: block; }
.eu-proj-icon-wrap { padding: 1rem 1rem 0; }
.eu-proj-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 8px;
    background: var(--gwr-sand);
    color: var(--gwr-primary);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.eu-proj-body { min-width: 0; padding: 1rem; }
.eu-proj-tag {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gwr-primary);
    margin-bottom: .2rem;
}
.eu-proj-title { font-size: .95rem; font-weight: 700; color: var(--gwr-dark); margin: 0 0 .25rem; line-height: 1.3; }
.eu-proj-desc { font-size: .85rem; color: var(--gwr-muted); margin: 0; line-height: 1.5; }

/* Footer-Hinweis */
.eu-footer {
    display: flex; align-items: center; gap: 1rem;
    background: var(--gwr-sand);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    border: 1px solid #e9ecef;
}
.eu-footer-icon {
    font-size: 2rem;
    color: var(--gwr-primary);
    flex-shrink: 0;
}
@media (max-width: 575.98px) {
    .eu-prog, .eu-proj { padding: 0; }
    .eu-prog-icon { width: 38px; height: 38px; font-size: 1.2rem; }
    /* Mobile: Projekt-Cards bleiben column (Bild oben, Text unten) */
    .eu-proj { flex-direction: column; }
    .eu-proj-img { min-height: 120px; }
    .eu-footer { flex-direction: column; text-align: center; }
}

/* === EU + Partner Logo-Leiste === */
.eu-partners-strip {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1.5rem 1.5rem 1.25rem;
}
.eu-partners-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
}
.eu-partners-row-top {
    border-bottom: 1px solid #f1f3f5;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
}
.eu-partners-row-top .eu-partner-cell {
    flex: 1 1 100%;
    max-width: 720px;
}
.eu-partners-row-top .eu-partner-cell img { max-height: 100px; }
.eu-partner-cell {
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    padding: .35rem .6rem;
    border-radius: 6px;
    transition: transform .2s, background .2s;
}
.eu-partner-cell:hover { transform: translateY(-2px); background: rgba(var(--gwr-primary-rgb), .04); }
.eu-partner-cell img {
    max-width: 100%;
    max-height: 70px;
    width: auto; height: auto;
    object-fit: contain;
    display: block;
}
.eu-partners-row-bottom .eu-partner-cell {
    min-width: 130px;
    max-width: 200px;
}
@media (max-width: 767.98px) {
    .eu-partners-strip { padding: 1.1rem .85rem; }
    .eu-partners-row { gap: 1rem; }
    .eu-partners-row-bottom .eu-partner-cell { min-width: 110px; max-width: 160px; }
    .eu-partner-cell img { max-height: 56px; }
    .eu-partners-row-top .eu-partner-cell img { max-height: 70px; }
}


/* ============================================================
   Weiterbildung, Kursliste (modules/courses/list.php) - Block 1 von 3
   ============================================================ */
.wb-landing-hero { position: relative; }
.wb-hero-scroll {
    position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%);
    display: inline-flex; flex-direction: row; align-items: center; gap: .55em;
    color: var(--gwr-primary); text-decoration: none;
    font-size: .85rem; font-weight: 600;
    padding: .55rem 1.4rem; border-radius: 999px;
    background: rgba(var(--gwr-primary-rgb), .12);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(var(--gwr-primary-rgb), .25);
    box-shadow: 0 3px 10px rgba(var(--gwr-primary-rgb), .15);
    transition: all .25s;
    white-space: nowrap;
    z-index: 2;
}
.wb-hero-scroll:hover {
    transform: translateX(-50%) translateY(-2px);
    background: rgba(var(--gwr-primary-rgb), .2);
    box-shadow: 0 6px 18px rgba(var(--gwr-primary-rgb), .25);
    color: var(--gwr-primary); text-decoration: none;
}
.wb-hero-scroll i { font-size: 1rem; animation: bounceDownInline 1.8s ease-in-out infinite; }
@keyframes bounceDownInline {
    0%,20%,50%,80%,100% { transform: translateY(0); }
    40% { transform: translateY(3px); }
    60% { transform: translateY(1px); }
}
@media (max-width: 767.98px) {
    .wb-hero-scroll { display: none !important; }
    .wb-landing-hero { padding-bottom: 0 !important; }
}
/* Inline-Scroll-Link (vor allem für Mobile, da das floating-Element ausgeblendet wird) */
.wb-hero-scroll-inline {
    display: inline-flex; align-items: center; gap: .35em;
    color: var(--gwr-primary); text-decoration: none !important;
    font-size: .85rem; font-weight: 600;
    padding: .4rem .9rem; border-radius: 999px;
    background: rgba(var(--gwr-primary-rgb), .08);
    border: 1px solid rgba(var(--gwr-primary-rgb), .2);
    transition: all .15s;
}
.wb-hero-scroll-inline:hover {
    background: var(--gwr-primary); color: #fff;
    border-color: var(--gwr-primary);
}
.wb-hero-scroll-inline i { font-size: .9rem; transition: transform .2s; }
.wb-hero-scroll-inline:hover i { transform: translateY(2px); }
/* Scroll-Margin: beim Anker-Sprung Headline „Alle Weiterbildungskurse" sichtbar lassen */
#wb-alle { scroll-margin-top: 80px; }


/* ============================================================
   Weiterbildung, Kursliste (modules/courses/list.php) - Block 2 von 3
   ============================================================ */
.wb-landing-hero {
    background: linear-gradient(135deg, #fff, var(--gwr-sand));
    border-bottom: 1px solid #e5e7eb;
}
.wb-hero-eyebrow {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--gwr-primary); font-weight: 600; margin-bottom: .35rem;
}
.wb-hero-title {
    font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 700;
    color: var(--gwr-dark); margin-bottom: .85rem; line-height: 1.1;
}
.wb-hero-lead {
    font-size: 1.05rem; color: var(--gwr-dark); opacity: .85;
    line-height: 1.55; max-width: 600px;
}
.wb-hero-meta { margin-top: 1.2rem; }
.wb-hero-stat {
    display: inline-flex; align-items: center; gap: .4em;
    background: rgba(var(--gwr-primary-rgb), .1); color: var(--gwr-primary);
    padding: .35em 1em; border-radius: 300px; font-size: .85rem; font-weight: 500;
}
.wb-hero-quote {
    background: #fff; border-left: 4px solid var(--gwr-primary);
    padding: 1.25rem 1.5rem; border-radius: 0 12px 12px 0;
    font-size: 1.05rem; font-style: italic; color: #444;
    line-height: 1.5; margin: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.wb-mission { background: #fafaf8 !important; }
.wb-mission-card {
    background: #fff; border-radius: 12px;
    padding: 1.5rem; height: 100%;
    border: 1px solid #e9ecef; transition: all .25s;
}
.wb-mission-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.08); border-color: var(--gwr-primary); }
.wb-mission-icon { font-size: 2rem; color: var(--gwr-primary); margin-bottom: .65rem; }
.wb-mission-card h2 { font-size: 1.05rem; font-weight: 600; margin-bottom: .5rem; }
.wb-mission-card p { font-size: .9rem; color: var(--gwr-muted); margin: 0; line-height: 1.5; }
@media (max-width: 767.98px) {
    .wb-hero-title { font-size: 1.85rem; }
    .wb-hero-lead { font-size: .95rem; }
    .wb-hero-quote { font-size: .95rem; padding: 1rem 1.15rem; }
}


/* ============================================================
   Weiterbildung, Kursliste (modules/courses/list.php) - Block 3 von 3
   ============================================================ */
.course-sidebar {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1rem;
    position: sticky; top: 6rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
}

/* Aktive Filter als Chips */
.active-filters { display: flex; flex-wrap: wrap; gap: .25rem; }
.active-filter-chip {
    display: inline-flex; align-items: center; gap: .3em;
    background: var(--gwr-primary); color: #fff;
    padding: .25em .6em; border-radius: 300px;
    font-size: .72rem; text-decoration: none;
    transition: background .15s;
}
.active-filter-chip:hover { background: var(--gwr-secondary); color: #fff; }
.active-filter-chip .bi-x-circle { opacity: .8; }

/* Collapsible Filter-Gruppen */
.filter-group {
    border-top: 1px solid #f0f0f0;
    margin: 0;
}
.filter-group:first-of-type { border-top: 0; }
.filter-group summary {
    cursor: pointer;
    padding: .65rem 0;
    font-size: .82rem; font-weight: 600;
    color: var(--gwr-dark);
    list-style: none;
    display: flex; align-items: center; gap: .4em;
}
.filter-group summary::-webkit-details-marker { display: none; }
.filter-group summary::after {
    content: '\F282'; font-family: 'bootstrap-icons';
    margin-left: auto; transition: transform .2s;
    color: var(--gwr-muted); font-size: .9rem;
}
.filter-group[open] summary::after { transform: rotate(90deg); }
.fg-count {
    margin-left: .35em;
    background: var(--gwr-sand); color: var(--gwr-muted);
    border-radius: 300px; padding: 0 .55em;
    font-size: .68rem; font-weight: 500;
}
.filter-list { display: flex; flex-direction: column; gap: .25rem; padding-bottom: .65rem; }

.cs-chip {
    display: flex; align-items: center; gap: .4em;
    padding: .35rem .6rem; border-radius: 6px;
    text-decoration: none;
    color: var(--gwr-dark); background: transparent;
    font-size: .82rem;
    transition: all .12s;
}
.cs-chip:hover { background: var(--gwr-sand); color: var(--gwr-primary); }
.cs-chip.active { background: var(--gwr-primary); color: #fff; }
.cs-chip.active i, .cs-chip.active .cs-chip-count { color: #fff !important; }
.cs-chip-count {
    margin-left: auto;
    color: var(--gwr-muted);
    font-size: .7rem; font-weight: 500;
}

@media (max-width: 991.98px) {
    .course-sidebar { position: static; max-height: none; }
}


/* ============================================================
   Kursdetailseite (modules/courses/show.php)
   ============================================================ */
.js-merken.ist-gemerkt {
    background: rgba(var(--gwr-primary-rgb), .1);
    border-color: var(--gwr-primary);
    color: var(--gwr-primary);
}
.js-merken:disabled { opacity: .6; }


/* ============================================================
   IVHS, Kursliste (modules/ivhs/list.php) - Block 1 von 3
   ============================================================ */
.ivhs-landing-hero { position: relative; }
.ivhs-hero-scroll {
    position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%);
    display: inline-flex; flex-direction: row; align-items: center; gap: .55em;
    color: #3B7771; text-decoration: none;
    font-size: .85rem; font-weight: 600;
    padding: .55rem 1.4rem; border-radius: 999px;
    background: rgba(59,119,113,.12);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(59,119,113,.25);
    box-shadow: 0 3px 10px rgba(59,119,113,.15);
    transition: all .25s;
    white-space: nowrap;
    z-index: 2;
}
.ivhs-hero-scroll:hover {
    transform: translateX(-50%) translateY(-2px);
    background: rgba(59,119,113,.2);
    box-shadow: 0 6px 18px rgba(59,119,113,.25);
    color: #3B7771; text-decoration: none;
}
.ivhs-hero-scroll i { font-size: 1rem; animation: bounceDownInline 1.8s ease-in-out infinite; }
@media (max-width: 767.98px) {
    .ivhs-hero-scroll { display: none !important; }
    .ivhs-landing-hero { padding-bottom: 0 !important; }
}
/* Inline-Scroll-Link, sichtbar auf Mobile (identisch zum WB-Pattern) */
.ivhs-hero-scroll-inline {
    display: inline-flex; align-items: center; gap: .35em;
    color: #3B7771; text-decoration: none !important;
    font-size: .85rem; font-weight: 600;
    padding: .4rem .9rem; border-radius: 999px;
    background: rgba(59,119,113,.1);
    border: 1px solid rgba(59,119,113,.22);
    transition: all .15s;
}
.ivhs-hero-scroll-inline:hover {
    background: #3B7771; color: #fff;
    border-color: #3B7771;
}
.ivhs-hero-scroll-inline i { font-size: .9rem; transition: transform .2s; }
.ivhs-hero-scroll-inline:hover i { transform: translateY(2px); }
/* Scroll-Margin: beim Anker-Sprung Headline sichtbar lassen */
#ivhs-alle { scroll-margin-top: 80px; }


/* ============================================================
   IVHS, Kursliste (modules/ivhs/list.php) - Block 2 von 3
   ============================================================ */
.ivhs-landing-hero {
    background: linear-gradient(135deg, #fff, rgba(59,119,113,.08));
    border-bottom: 1px solid #e5e7eb;
}
.ivhs-hero-eyebrow {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
    color: #3B7771; font-weight: 600; margin-bottom: .35rem;
}
/* Title-Size identisch zu .wb-hero-title — nur Farbe IVHS-teal */
.ivhs-hero-title {
    font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 700;
    color: var(--gwr-dark); margin-bottom: .85rem; line-height: 1.1;
}
/* Lead/Quote-Sizes identisch zur Weiterbildung-Hero */
.ivhs-hero-lead {
    font-size: 1.05rem; color: var(--gwr-dark); opacity: .85;
    line-height: 1.55; max-width: 600px;
}
.ivhs-hero-meta { margin-top: 1.2rem; }
.ivhs-hero-stat {
    display: inline-flex; align-items: center; gap: .4em;
    background: rgba(59,119,113,.12); color: #3B7771;
    padding: .35em 1em; border-radius: 300px; font-size: .85rem; font-weight: 500;
}
.ivhs-hero-quote {
    background: #fff; border-left: 4px solid #3B7771;
    padding: 1.25rem 1.5rem; border-radius: 0 12px 12px 0;
    font-size: 1.05rem; font-style: italic; color: #444;
    line-height: 1.5; margin: 0;
    box-shadow: 0 4px 16px rgba(59,119,113,.1);
}
.ivhs-mission { background: #fff; }
.ivhs-mission-card {
    background: #fff; border-radius: 12px;
    padding: 1.5rem; height: 100%;
    border: 1px solid #e9ecef; transition: all .25s;
}
.ivhs-mission-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(59,119,113,.12); border-color: #3B7771; }
.ivhs-mission-icon { font-size: 2rem; color: #3B7771; margin-bottom: .65rem; }
.ivhs-mission-card h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: .5rem; color: #3B7771; }
.ivhs-mission-card p { font-size: .9rem; color: var(--gwr-muted); margin: 0; line-height: 1.5; }
@media (max-width: 767.98px) {
    .ivhs-hero-title { font-size: 1.85rem; }
    .ivhs-hero-lead { font-size: .95rem; }
    .ivhs-hero-quote { font-size: .95rem; padding: 1rem 1.15rem; }
}


/* ============================================================
   IVHS, Kursliste (modules/ivhs/list.php) - Block 3 von 3
   ============================================================ */
/* === IVHS Branding (lokal auf .ivhs-scope beschränkt) === */
.ivhs-scope {
    --ivhs-primary: #3B7771;
    --ivhs-secondary: #5BB1C2;
    --ivhs-accent: #2d5d58;
}
.ivhs-pill {
    display: inline-flex; align-items: center; gap: .35em;
    background: linear-gradient(135deg, var(--ivhs-primary), var(--ivhs-secondary));
    color: #fff; padding: .25rem .65rem; border-radius: 6px;
    font-weight: 700; font-size: .72rem; letter-spacing: .04em;
    text-transform: uppercase;
}
.ivhs-ink { color: var(--ivhs-primary) !important; }
.ivhs-scope .btn-ivhs {
    background: var(--ivhs-primary); color: #fff;
    border: 1px solid var(--ivhs-primary);
    border-radius: var(--gwr-radius-btn);
    padding: .55rem 1.4rem; font-weight: 500;
    transition: all var(--gwr-anim-speed) ease;
}
.ivhs-scope .btn-ivhs:hover { background: var(--ivhs-accent); border-color: var(--ivhs-accent); color: #fff; transform: translateY(-1px); }
.ivhs-scope .btn-ivhs-outline {
    background: transparent; color: var(--ivhs-primary);
    border: 1px solid var(--ivhs-primary);
    border-radius: var(--gwr-radius-btn);
    padding: .55rem 1.4rem; font-weight: 500;
}
.ivhs-scope .btn-ivhs-outline:hover { background: var(--ivhs-primary); color: #fff; }

/* === Sidebar (gleicher Style wie /kurse) === */
.ivhs-scope .course-sidebar {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1rem;
    position: sticky; top: 6rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
}

.ivhs-scope .active-filters { display: flex; flex-wrap: wrap; gap: .25rem; }
.ivhs-scope .active-filter-chip {
    display: inline-flex; align-items: center; gap: .3em;
    background: var(--ivhs-primary); color: #fff;
    padding: .25em .6em; border-radius: 300px;
    font-size: .72rem; text-decoration: none;
    transition: background .15s;
}
.ivhs-scope .active-filter-chip:hover { background: var(--ivhs-accent); color: #fff; }
.ivhs-scope .active-filter-chip .bi-x-circle { opacity: .8; }

.ivhs-scope .filter-group {
    border-top: 1px solid #f0f0f0;
    margin: 0;
}
.ivhs-scope .filter-group:first-of-type { border-top: 0; }
.ivhs-scope .filter-group summary {
    cursor: pointer;
    padding: .65rem 0;
    font-size: .82rem; font-weight: 600;
    color: var(--gwr-dark);
    list-style: none;
    display: flex; align-items: center; gap: .4em;
}
.ivhs-scope .filter-group summary::-webkit-details-marker { display: none; }
.ivhs-scope .filter-group summary::after {
    content: '\F282'; font-family: 'bootstrap-icons';
    margin-left: auto; transition: transform .2s;
    color: var(--gwr-muted); font-size: .9rem;
}
.ivhs-scope .filter-group[open] summary::after { transform: rotate(90deg); }
.ivhs-scope .fg-count {
    margin-left: .35em;
    background: var(--gwr-sand); color: var(--gwr-muted);
    border-radius: 300px; padding: 0 .55em;
    font-size: .68rem; font-weight: 500;
}
.ivhs-scope .filter-list { display: flex; flex-direction: column; gap: .25rem; padding-bottom: .65rem; }

.ivhs-scope .cs-chip {
    display: flex; align-items: center; gap: .4em;
    padding: .35rem .6rem; border-radius: 6px;
    text-decoration: none;
    color: var(--gwr-dark); background: transparent;
    font-size: .82rem;
    transition: all .12s;
}
.ivhs-scope .cs-chip:hover { background: rgba(59,119,113,.08); color: var(--ivhs-primary); }
.ivhs-scope .cs-chip.active { background: var(--ivhs-primary); color: #fff; }
.ivhs-scope .cs-chip.active i, .ivhs-scope .cs-chip.active .cs-chip-count { color: #fff !important; }
.ivhs-scope .cs-chip-count {
    margin-left: auto;
    color: var(--gwr-muted);
    font-size: .7rem; font-weight: 500;
}

/* IVHS-Pagination */
.ivhs-scope .page-item.active .page-link {
    background: var(--ivhs-primary); border-color: var(--ivhs-primary);
}
.ivhs-scope .page-link { color: var(--ivhs-primary); }
.ivhs-scope .page-link:hover { color: var(--ivhs-accent); }

@media (max-width: 991.98px) {
    .ivhs-scope .course-sidebar { position: static; max-height: none; }
}

/* === Aus modules/pages/programm_text.php === */
/* Sprungmarke: erst sichtbar, wenn sie den Tastatur-Fokus bekommt */
.pt-skip {
    position: absolute; left: -9999px; top: 0; z-index: 2000;
    background: var(--gwr-primary, #1B5B3F); color: #fff;
    padding: .7rem 1.2rem; border-radius: 0 0 8px 0; text-decoration: none;
}
.pt-skip:focus { left: 0; color: #fff; }

.pt-wrap { padding: 2rem 0 3rem; }
.pt-wrap .container { max-width: 860px; }
.pt-wrap h1 { font-size: 1.9rem; margin-bottom: .75rem; }
.pt-intro { font-size: 1.02rem; line-height: 1.6; max-width: 62ch; margin-bottom: 2rem; }

.pt-toc { border: 1px solid #dee2e6; border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 2.5rem; }
.pt-toc-titel { font-size: 1.05rem; margin: 0 0 .5rem; }
.pt-toc ul { margin: 0; padding-left: 1.2rem; }
.pt-toc li { margin-bottom: .25rem; }

.pt-programm { margin-bottom: 3rem; }
.pt-programm h2 {
    font-size: 1.5rem; margin: 0 0 .35rem;
    padding-bottom: .4rem; border-bottom: 2px solid var(--gwr-primary, #1B5B3F);
}
.pt-programm-link { font-size: .9rem; margin-bottom: 1.5rem; }
.pt-programm h3 { font-size: 1.15rem; margin: 2rem 0 .75rem; }

.pt-kurse { list-style: none; margin: 0; padding: 0; }
.pt-kurs { padding: .9rem 0; border-top: 1px solid #e9ecef; }
.pt-kurs:last-child { border-bottom: 1px solid #e9ecef; }
.pt-kurs-titel { font-size: 1.02rem; font-weight: 600; margin: 0 0 .4rem; line-height: 1.35; }

.pt-daten { display: grid; grid-template-columns: 8.5rem 1fr; gap: .15rem .75rem; margin: 0; font-size: .92rem; }
.pt-daten dt { font-weight: 600; color: #495057; }
.pt-daten dd { margin: 0; }

.pt-schluss { margin-top: 2.5rem; font-size: .95rem; }

@media (max-width: 575.98px) {
    .pt-daten { grid-template-columns: 1fr; gap: 0; }
    .pt-daten dt { margin-top: .3rem; }
}

/* Ausdruck: nur der Inhalt, Links als reiner Text */
@media print {
    .pt-toc, .pt-programm-link, .pt-skip { display: none; }
    .pt-wrap { padding: 0; }
    .pt-kurs { page-break-inside: avoid; }
    .pt-wrap a { color: #000; text-decoration: none; }
}

/* === Aus modules/pages/barrierefreiheit.php === */
/* Sprungmarke: erst sichtbar, wenn sie den Tastatur-Fokus bekommt */
.bf-skip {
    position: absolute; left: -9999px; top: 0; z-index: 2000;
    background: var(--gwr-primary, #1B5B3F); color: #fff;
    padding: .7rem 1.2rem; border-radius: 0 0 8px 0; text-decoration: none;
}
.bf-skip:focus { left: 0; color: #fff; }

.bf-wrap { padding: 2rem 0 3rem; }
.bf-wrap .container { max-width: 760px; }
.bf-wrap h1 { font-size: 1.9rem; margin-bottom: .75rem; }
.bf-wrap h2 {
    font-size: 1.25rem; margin: 2.25rem 0 .75rem;
    padding-bottom: .35rem; border-bottom: 2px solid var(--gwr-primary, #1B5B3F);
}
.bf-wrap p { line-height: 1.65; max-width: 66ch; }
.bf-intro { font-size: 1.02rem; }

.bf-liste { padding-left: 1.2rem; max-width: 66ch; }
.bf-liste li { margin-bottom: .85rem; line-height: 1.6; }

.bf-kontakt { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.bf-kontakt li { margin-bottom: .35rem; }

.bf-stand { margin-top: 2.5rem; font-size: .9rem; color: #6c757d; }

/* === Aus views/partials/course-card-compact.php === */
.course-mini {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: .65rem;
    padding: .65rem .75rem;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    text-decoration: none; color: var(--gwr-dark);
    transition: all .2s;
    hyphens: none; word-break: keep-all;
}
.course-mini:hover {
    border-color: var(--gwr-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    text-decoration: none; color: var(--gwr-dark);
}
.cm-date {
    color: #fff; border-radius: 7px;
    padding: .3rem .35rem; text-align: center; line-height: 1.05;
    min-width: 50px;
}
.cm-wd  { font-size:.55rem; opacity:.85; text-transform:uppercase; }
.cm-day { font-size:1.2rem; font-weight:700; margin: .05rem 0; }
.cm-mon { font-size:.55rem; opacity:.85; text-transform:uppercase; }
.cm-content { min-width: 0; text-align: left; }
.cm-title {
    font-size: .86rem; font-weight: 600; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.cm-meta {
    font-size: .7rem; color: var(--gwr-muted);
    margin-top: .15rem;
    display: flex; flex-direction: column; gap: .05rem;
}
.cm-meta-item {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cm-meta-item i { color: var(--gwr-primary); margin-right: .15em; }
.cm-arrow { color: #ccc; font-size: 1rem; flex-shrink: 0; }
.course-mini:hover .cm-arrow { color: var(--gwr-primary); }
@media (max-width: 575.98px) {
    .course-mini { grid-template-columns: 46px 1fr auto; gap: .45rem; padding: .55rem .55rem; }
    .cm-date { min-width: 42px; padding: .25rem .3rem; }
    .cm-day { font-size: 1rem; }
    .cm-title { font-size: .8rem; }
    .cm-meta { font-size: .65rem; }
}

/* === Aus modules/instructors/show.php === */
.instructor-hero { background: linear-gradient(135deg, var(--gwr-sand) 0%, #fff 100%); }
.instructor-card-header {
    display: flex; gap: 1.5rem; align-items: flex-start;
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
    border: 1px solid #e9ecef;
}
.instructor-photo-wrap { flex-shrink: 0; }
.instructor-photo-big {
    width: 160px; height: 160px; border-radius: 2px;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.12);
}
.instructor-photo-big.avatar-placeholder {
    background: linear-gradient(135deg, var(--gwr-primary), var(--gwr-secondary));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; font-weight: 600;
}
.instructor-info { flex-grow: 1; min-width: 0; }
.instructor-name {
    font-family: var(--gwr-font-heading);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--gwr-primary);
    font-weight: 700;
    margin: 0 0 .35rem;
}
.instructor-specialties {
    font-size: 1rem; color: var(--gwr-muted);
    margin: 0 0 1rem; line-height: 1.5;
}
.instructor-meta-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.instructor-meta-chip {
    display: inline-flex; align-items: center; gap: .4em;
    padding: .4em .85em;
    background: var(--gwr-sand);
    border-radius: 300px;
    color: var(--gwr-dark);
    text-decoration: none;
    font-size: .82rem;
    transition: background .15s;
}
.instructor-meta-chip:hover { background: rgba(var(--gwr-primary-rgb), .1); color: var(--gwr-primary); }
.instructor-meta-chip.instructor-meta-chip-primary {
    background: var(--gwr-primary); color: #fff; font-weight: 500;
}
.instructor-meta-chip.instructor-meta-chip-primary i { color: #fff !important; opacity: .9; }

/* === Photo Hover-Zoom + Lightbox-Trigger === */
.instructor-photo-trigger {
    position: relative;
    background: none; border: 0; padding: 0;
    cursor: zoom-in;
    overflow: hidden;
    border-radius: 2px;
    display: block;
    line-height: 0;
}
.instructor-photo-trigger .instructor-photo-big {
    transition: transform .4s cubic-bezier(.25,.46,.45,.94);
    will-change: transform;
}
.instructor-photo-trigger:hover .instructor-photo-big {
    transform: scale(1.08);
}
.instructor-photo-zoom {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.35);
    color: #fff; font-size: 1.6rem;
    opacity: 0; transition: opacity .25s;
    pointer-events: none;
}
.instructor-photo-trigger:hover .instructor-photo-zoom { opacity: 1; }

/* === Lightbox === */
.instructor-lightbox {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
    display: none;
    align-items: center; justify-content: center;
    padding: 1rem;
    opacity: 0; transition: opacity .25s;
    cursor: zoom-out;
}
.instructor-lightbox.show { display: flex; opacity: 1; }
.instructor-lightbox img {
    max-width: min(900px, 95vw);
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    transform: scale(.95);
    transition: transform .3s cubic-bezier(.25,.46,.45,.94);
}
.instructor-lightbox.show img { transform: scale(1); }
.instructor-lightbox-close {
    position: absolute; top: 1.5rem; right: 1.5rem;
    background: rgba(255,255,255,.15);
    border: 0; color: #fff;
    width: 44px; height: 44px;
    border-radius: 50%;
    font-size: 1.6rem; line-height: 1;
    cursor: pointer;
    transition: background .15s;
    z-index: 2001;
}
.instructor-lightbox-close:hover { background: rgba(255,255,255,.3); }
/* Mobile: Bild bleibt LINKS, Info rechts — 2-Spalten-Layout auch klein */
@media (max-width: 767.98px) {
    .instructor-card-header { gap: 1rem; padding: 1rem; align-items: flex-start; }
    .instructor-photo-big { width: 100px; height: 100px; font-size: 2rem; }
    .instructor-name { font-size: 1.25rem !important; margin-bottom: .25rem !important; }
    .instructor-specialties { font-size: .82rem; margin-bottom: .5rem !important; }
    .instructor-meta-chip { padding: .25em .55em !important; font-size: .72rem !important; }
    .instructor-meta-row { gap: .3rem !important; }
}
@media (max-width: 380px) {
    .instructor-photo-big { width: 80px; height: 80px; font-size: 1.6rem; }
    .instructor-name { font-size: 1.1rem !important; }
}

.instructor-section {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}
.instructor-section-title {
    font-family: var(--gwr-font-heading);
    font-size: 1.15rem; font-weight: 600;
    color: var(--gwr-primary);
    margin: 0 0 .85rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--gwr-sand);
    display: flex; align-items: center; gap: .5em;
}
.instructor-bio, .instructor-qual { line-height: 1.7; color: var(--gwr-dark); }

.instructor-sidecard {
    background: linear-gradient(135deg, var(--gwr-primary) 0%, var(--gwr-secondary) 100%);
    color: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    text-align: center;
    position: sticky; top: 6rem;
}
.instructor-sidecard h6 { color: rgba(255,255,255,.85) !important; }
.instructor-sidecard small { color: rgba(255,255,255,.85) !important; }
.instructor-sidecard small strong { color: #fff; }
.instructor-num {
    font-size: 4rem; font-weight: 700;
    line-height: 1; color: #fff;
    font-family: var(--gwr-font-heading);
}
.instructor-sidecard .btn-gwr {
    background: #fff; color: var(--gwr-primary);
    border-color: #fff;
}
.instructor-sidecard .btn-gwr:hover { background: var(--gwr-sand); color: var(--gwr-primary); }
@media (max-width: 991.98px) { .instructor-sidecard { position: static; } }
/* dummy block end */

/* === Aus modules/instructors/list.php === */
.instructor-prog-tabs { display: inline-flex; gap: .35rem; background: #fff; padding: 4px; border-radius: 999px; border: 1px solid #e9ecef; }
.instr-prog-tab {
    display: inline-flex; align-items: center; gap: .35em;
    padding: .35rem .9rem; border-radius: 999px;
    color: var(--gwr-muted); text-decoration: none;
    font-size: .82rem; font-weight: 500;
    transition: all .2s;
}
.instr-prog-tab:hover { color: var(--gwr-primary); background: var(--gwr-sand); }
.instr-prog-tab.active { background: var(--gwr-primary); color: #fff; }
.instructor-sidebar {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1.25rem;
    position: sticky;
    top: 6rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.cat-chip {
    display: flex; align-items: center; gap: .5em;
    padding: .55rem .85rem; border-radius: 8px;
    text-decoration: none;
    color: var(--gwr-dark); background: #fff;
    border: 1px solid #e9ecef;
    font-size: .88rem;
    transition: all .15s;
}
.cat-chip:hover { background: var(--gwr-sand); border-color: var(--gwr-soft); color: var(--gwr-dark); }
.cat-chip.active {
    background: var(--gwr-primary); color: #fff;
    border-color: var(--gwr-primary);
}
.cat-chip.active i, .cat-chip.active .cat-chip-count { color: #fff !important; }
.cat-chip-count {
    margin-left: auto;
    background: rgba(0,0,0,.06); color: var(--gwr-muted);
    border-radius: 300px; padding: .05em .55em;
    font-size: .72rem; font-weight: 500;
}
.cat-group-header {
    font-size: .68rem; text-transform: uppercase;
    letter-spacing: .06em; color: var(--gwr-muted);
    font-weight: 600;
    margin: .75rem 0 .25rem;
    padding: .15rem .25rem;
    display: flex; align-items: center; gap: .35em;
    border-bottom: 1px solid #f0f0f0;
}
.cat-group-header:first-of-type { margin-top: .25rem; }

/* INSTRUCTOR CARD V2 – sichtbarer, klare Box */
.instructor-card-v2 {
    display: flex; gap: 1rem; align-items: center;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    padding: 1rem;
    text-decoration: none; color: var(--gwr-dark);
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
    transition: all .2s;
    height: 100%;
}
.instructor-card-v2:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,.1);
    border-color: var(--gwr-primary);
    color: var(--gwr-dark);
    transform: translateY(-2px);
}
.ic-avatar {
    width: 72px; height: 72px; border-radius: 2px;
    object-fit: cover; flex-shrink: 0;
    border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
.ic-avatar-ph {
    background: linear-gradient(135deg, var(--gwr-primary), var(--gwr-secondary));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 1.4rem;
}
.ic-body { flex-grow: 1; min-width: 0; }
.ic-name { font-size: 1rem; font-weight: 600; margin: 0 0 .15rem; color: var(--gwr-primary); line-height: 1.2; }
.ic-spec { font-size: .8rem; color: var(--gwr-muted); margin: 0 0 .35rem; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ic-meta {
    display: flex; justify-content: space-between; align-items: center;
    font-size: .78rem; color: var(--gwr-primary);
}
.ic-courses { background: rgba(var(--gwr-primary-rgb), .08); padding: .2em .65em; border-radius: 300px; font-weight: 500; }
.ic-arrow { opacity: .5; transition: transform .2s, opacity .2s; }
.instructor-card-v2:hover .ic-arrow { opacity: 1; transform: translateX(4px); }

@media (max-width: 991.98px) {
    .instructor-sidebar { position: static; }
}

/* === Aus modules/booking/form.php === */
/* === TYP-SWITCH: kompakter Pill-Toggle === */
.type-switch-wrap { padding: 0; }
.type-switch {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #f3f3f3;
    border-radius: 12px;
    padding: 4px;
    overflow: hidden;
}
.type-switch-bg {
    position: absolute; top: 4px; left: 4px;
    width: calc(50% - 4px); height: calc(100% - 8px);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    z-index: 0;
}
.type-switch:has(#typeCompany:checked) .type-switch-bg { transform: translateX(calc(100% + 0px)); }
.type-switch-option {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center; gap: .65rem;
    padding: .75rem .5rem;
    margin: 0; cursor: pointer;
    color: var(--gwr-muted);
    transition: color .25s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.type-switch-option i { font-size: 1.25rem; }
.type-switch-option strong { display: block; font-size: .92rem; line-height: 1.1; }
.type-switch-option small { display: block; font-size: .7rem; opacity: .7; line-height: 1; margin-top: .15rem; }
.type-switch-option .type-switch-text { text-align: left; }
.btn-check:checked + .type-switch-option { color: var(--gwr-primary); }
.btn-check:checked + .type-switch-option strong { font-weight: 600; }

/* Gast oder Konto: zwei gleichwertige Karten, keine davon vorbelastet */
.wahl-karte {
    display: flex; flex-direction: column; gap: .15rem;
    height: 100%; margin: 0; padding: .85rem 1rem;
    border: 2px solid #e4e6e8; border-radius: 10px;
    background: #fff; cursor: pointer;
    transition: border-color .18s, background .18s, box-shadow .18s;
    -webkit-tap-highlight-color: transparent;
}
.wahl-karte i { font-size: 1.15rem; color: var(--gwr-muted); transition: color .18s; }
.wahl-titel { font-weight: 600; font-size: .95rem; color: var(--gwr-dark); line-height: 1.25; }
.wahl-text  { font-size: .8rem; color: var(--gwr-muted); line-height: 1.35; }
.wahl-karte:hover { border-color: #c9ccd0; background: #fcfcfc; }
.btn-check:checked + .wahl-karte {
    border-color: var(--gwr-primary);
    background: rgba(var(--gwr-primary-rgb), .04);
    box-shadow: 0 2px 8px rgba(var(--gwr-primary-rgb), .1);
}
.btn-check:checked + .wahl-karte i { color: var(--gwr-primary); }
.btn-check:focus-visible + .wahl-karte { outline: 2px solid var(--gwr-primary); outline-offset: 2px; }

/* Schnellauswahl gespeicherter Mitarbeiter */
.emp-schnellwahl { background: #f8f9fa; border-radius: 8px; padding: .75rem .9rem; }
.emp-chip { font-size: .82rem; }
.emp-chip i { font-size: .7rem; opacity: .6; }
.emp-chip-genutzt {
    background: rgba(var(--gwr-primary-rgb), .12) !important;
    border-color: var(--gwr-primary) !important;
    color: var(--gwr-primary) !important;
}

@media (max-width: 480px) {
    .type-switch-option { padding: .65rem .3rem; gap: .4rem; }
    .type-switch-option i { font-size: 1.1rem; }
    .type-switch-option strong { font-size: .82rem; }
    .type-switch-option small { font-size: .62rem; }
}

/* Booker-Blocks kompakter */
.booker-block { padding: 1rem !important; }
.booker-block h5 { font-size: 1rem; }
@media (max-width: 575.98px) {
    .booker-block { padding: .85rem !important; border-radius: 10px !important; }
    .booker-block .form-label { font-size: .72rem; margin-bottom: .1rem; }
    .booker-block .row.g-2 { --bs-gutter-x: .35rem; --bs-gutter-y: .5rem; }
}

/* AGB-Modal */
.agb-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    opacity: 0; transition: opacity .25s;
}
.agb-modal-overlay.show { opacity: 1; }
.agb-modal {
    background: #fff;
    border-radius: 14px;
    max-width: 720px; width: 100%;
    max-height: 88vh;
    display: flex; flex-direction: column;
    transform: scale(.95);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 24px 60px rgba(0,0,0,.3);
    overflow: hidden;
}
.agb-modal-overlay.show .agb-modal { transform: scale(1); }
.agb-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
    background: var(--gwr-sand);
}
.agb-modal-header h4 { margin: 0; font-size: 1.1rem; color: var(--gwr-primary); }
.agb-modal-close {
    background: none; border: 0;
    font-size: 1.6rem; color: var(--gwr-muted);
    cursor: pointer; line-height: 1;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    transition: background .15s;
}
.agb-modal-close:hover { background: rgba(0,0,0,.06); }
.agb-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
    line-height: 1.6;
    font-size: .92rem;
}
.agb-modal-body h2, .agb-modal-body h3 { color: var(--gwr-primary); margin-top: 1.2rem; font-size: 1.05rem; }
.agb-modal-body p, .agb-modal-body li { margin-bottom: .75rem; }
.agb-modal-footer {
    padding: .85rem 1.5rem;
    border-top: 1px solid #e9ecef;
    background: #fafafa;
    display: flex; justify-content: flex-end; gap: .5rem;
}
.agb-modal-loading {
    text-align: center; padding: 3rem; color: var(--gwr-muted);
}

/* intl-tel-input integration mit Bootstrap */
.iti { display: block; width: 100%; }
.iti__country-list { z-index: 2100; }
.form-control.iti__tel-input { padding-left: 90px !important; }

/* === Aus modules/profile/data.php === */
.md-block { background:#fff; border:1px solid #e9ecef; border-radius:12px;
                padding:1.1rem 1.3rem; margin-bottom:1rem; }
    .md-block h2 { font-size:.78rem; text-transform:uppercase; letter-spacing:.05em;
                   color:var(--gwr-primary); font-weight:600; margin:0 0 .75rem;
                   border:0; padding:0; }
    .md-block table { width:100%; border-collapse:collapse; margin:0; }
    .md-block th, .md-block td { text-align:left; padding:.45rem 0; vertical-align:top;
                                 border-bottom:1px solid #f1f3f5; font-size:.9rem; }
    .md-block tr:last-child th, .md-block tr:last-child td { border-bottom:0; }
    .md-block th { width:42%; font-weight:500; color:var(--gwr-muted); }
    .md-block td { color:var(--gwr-dark); }
    .md-block .leer { color:var(--gwr-muted); font-size:.88rem; margin:0; }
    @media (max-width: 575.98px) {
        .md-block th, .md-block td { display:block; width:100%; padding:.2rem 0; border:0; }
        .md-block th { font-size:.78rem; padding-top:.6rem; }
        .md-block tr { display:block; border-bottom:1px solid #f1f3f5; padding-bottom:.4rem; }
    }

/* ============================================================
   Aus dem Programmheft (Kursseite)

   Die Heftseiten bleiben einzelne Bilder, nie zusammengesetzt. Auf dem
   Telefon steht eine Seite je Zeile, am Schreibtisch zwei nebeneinander.
   Die Downloads sind bewusst hell gehalten: sie sind ein Angebot, nicht
   die Hauptsache. Anmelden bleibt der einzige Vollton-Knopf der Seite.
   ============================================================ */
.kh-block { margin-top: 1.75rem; }
.kh-titel { margin-bottom: .75rem; }

/* Bild links, die beiden Downloads rechts daneben untereinander. Auf dem
   Telefon rutschen sie unter das Bild. */
.kh-inhalt { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem 1.25rem; }
.kh-inhalt > .kh-galerie { flex: 0 0 auto; margin-bottom: 0; }
.kh-inhalt > .kh-downloads { flex: 1 1 16rem; min-width: 0; }

/* Die Heftseiten sind Vorschaubilder, keine Leseansicht: klein, in einer
   Reihe, zum Antippen. Gelesen wird im Fenster, das sich beim Klick oeffnet.
   Vorher nahmen sie fast die halbe Spalte ein. */
.kh-galerie {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin-bottom: .75rem;
}
.kh-seite {
    position: relative; display: block;
    width: 104px; flex: 0 0 auto;
    border: 1px solid #e0e4e2; border-radius: 6px;
    overflow: hidden; background: #fff;
    transition: border-color .15s, transform .15s;
}
.kh-seite:hover { border-color: var(--gwr-primary); transform: translateY(-2px); }
/* Heftseiten sind DIN-Formate, also immer im Verhaeltnis 1 zu Wurzel 2.
   Das Verhaeltnis vorzugeben reserviert den Platz, bevor das Bild geladen
   ist. Sonst springt der Text beim Scrollen, weil die Bilder erst spaet
   nachgeladen werden. */
.kh-seite img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1.414; object-fit: cover; }
.kh-seite-lupe {
    position: absolute; inset: auto .2rem .2rem auto;
    width: 1.15rem; height: 1.15rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.94); color: var(--gwr-primary);
    font-size: .55rem; box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

/* Downloads: links das rote PDF-Zeichen, rechts der Pfeil nach unten.
   Damit ist ohne Beschriftung klar, was beim Klick passiert. */
.kh-downloads { display: flex; flex-direction: column; gap: .5rem; max-width: 26rem; }
.kh-knopf {
    display: flex; align-items: center; gap: .6rem;
    text-decoration: none; color: var(--gwr-dark);
    background: #fff;
    border: 1px solid #e2e6e4; border-radius: 10px;
    padding: .5rem .6rem;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.kh-knopf:hover {
    border-color: var(--gwr-primary);
    background: var(--gwr-sand);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.kh-typ {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.2rem; height: 1.7rem; border-radius: 5px;
    background: #c8362a; color: #fff;
    font-size: .62rem; font-weight: 700; letter-spacing: .04em;
}
.kh-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1 1 auto; }
.kh-text strong { font-size: .84rem; font-weight: 600; }
.kh-text small { font-size: .72rem; color: var(--gwr-muted); }
.kh-pfeil { flex: 0 0 auto; font-size: .95rem; color: var(--gwr-muted); }
.kh-knopf:hover .kh-pfeil { color: var(--gwr-primary); }

/* Ruhige Ansicht: die Heftseiten sind Bilder mit Inhalt, sie bleiben.
   Nur der Schmuck darum verschwindet. */
html[data-ruhig="an"] .kh-seite { box-shadow: none; }
html[data-ruhig="an"] .kh-seite-lupe { display: none; }

/* Hinweisband ueber der Vorschau eines Entwurfs */
.vorschau-band {
    display: flex; align-items: flex-start; gap: .6rem;
    background: #fff4d6; border-bottom: 1px solid #e8d9a8;
    color: #6b5310; font-size: .88rem; line-height: 1.45;
    padding: .7rem 1rem; text-align: left;
}
.vorschau-band > i { font-size: 1.05rem; flex: 0 0 auto; margin-top: .05rem; }
.vorschau-band strong { color: #4d3c0a; }

/* Bild in voller Grösse im Fenster */
/* ============================================================
   Heftseite gross ansehen

   Ein eigenes Fenster, kein Rueckfrage-Dialog: das Bild fuellt den Schirm
   bis auf einen Rand, der Hintergrund wird unscharf gezeichnet. Ohne
   Kopfleiste und ohne Rahmen, damit nichts vom Blatt ablenkt.
   ============================================================ */
.kh-lupe {
    width: 100vw; max-width: 100vw;
    height: 100vh; max-height: 100vh;
    margin: 0; padding: 0; border: 0;
    background: transparent;
    overflow: hidden;
    display: none;
}
.kh-lupe[open] { display: flex; align-items: center; justify-content: center; }
.kh-lupe::backdrop {
    background: rgba(20, 24, 22, .62);
    backdrop-filter: blur(10px) saturate(115%);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
}

.kh-lupe-rahmen {
    margin: 0; padding: 2.5rem 1rem 1rem;
    display: flex; flex-direction: column; align-items: center; gap: .6rem;
    max-height: 100vh;
}
.kh-lupe img {
    display: block;
    max-width: min(94vw, 60rem);
    max-height: 82vh;
    width: auto; height: auto;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.kh-lupe figcaption {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: center; gap: .35rem 1rem;
    color: rgba(255,255,255,.9); font-size: .85rem; text-align: center;
}
.kh-lupe-datei { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.kh-lupe-datei:hover { color: #fff; }

/* Knoepfe schweben ueber dem unscharfen Grund */
.kh-lupe-zu, .kh-lupe-pfeil {
    position: fixed; z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.14);
    color: #fff; font-size: 1.05rem; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.kh-lupe-zu:hover, .kh-lupe-pfeil:hover {
    background: rgba(255,255,255,.26); border-color: rgba(255,255,255,.5);
}
.kh-lupe-zu { top: 1rem; right: 1rem; }
.kh-lupe-pfeil { top: 50%; transform: translateY(-50%); }
.kh-lupe-zurueck { left: 1rem; }
.kh-lupe-vor { right: 1rem; }
.kh-lupe-pfeil[hidden] { display: none; }
.kh-lupe :focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

@media (max-width: 575.98px) {
    .kh-lupe-rahmen { padding: 3.5rem .5rem .5rem; }
    .kh-lupe img { max-width: 96vw; max-height: 74vh; }
    .kh-lupe-zu, .kh-lupe-pfeil { width: 2.4rem; height: 2.4rem; }
    /* Auf dem Telefon stehen die Pfeile unten, dort ist der Daumen */
    .kh-lupe-pfeil { top: auto; bottom: 1rem; transform: none; }
}

/* ============================================================
   Anmeldebox in der rechten Spalte

   Preis, Anmeldeknopf und Teilen stehen direkt unter den Angaben zum
   Kurs. Die Entscheidung soll neben den Fakten stehen, nicht am Ende
   einer langen Seite.
   ============================================================ */
.cd-anmeldebox .cd-price-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: .5rem; margin-bottom: .85rem;
    padding-bottom: .85rem; border-bottom: 1px solid #eceeed;
}
.cd-anmeldebox .cd-price { font-size: 1.65rem; }
.cd-anmeldebox .btn { margin-top: .5rem; }
.cd-anmeldebox > .btn:first-of-type { margin-top: 0; }

/* Die rechte Spalte laeuft mit, solange links noch Text kommt */
@media (min-width: 992px) {
    .cd-spalte-rechts { position: sticky; top: 4.5rem; align-self: flex-start; }
}

/* ============================================================
   Blocksatz für Fliesstexte

   Beschreibungen werden im Blocksatz gesetzt, wie im gedruckten Heft.
   Silbentrennung ist dabei Pflicht: ohne sie reisst Blocksatz bei langen
   deutschen Woertern grosse Luecken zwischen die Woerter.
   ============================================================ */
/* Fliesstexte linksbuendig, mit Flattersatz.

   Zwischendurch stand hier Blocksatz ohne Worttrennung. Deutsch hat lange
   Woerter, und ohne Trennung muss der Ausgleich allein ueber die
   Wortabstaende kommen: dabei reissen Luecken auf, die sich zu hellen
   Baendern durch den Absatz ziehen. Bei der GWR ist das aufgefallen.

   Silbentrennung waere die uebliche Antwort darauf, setzt aber Trennstriche
   in Texte, die woertlich aus dem gedruckten Heft stammen. Also Flattersatz.
   Er ist ausserdem das, was Leichte Sprache verlangt, und die IVHS-Hefte
   sind so gesetzt.

   overflow-wrap bleibt: ein einzelnes Wort, das laenger ist als die Zeile,
   soll umbrechen statt ueber den Rand zu stehen. */
.cd-description p,
.cd-description li,
.cms-seitentext.cms-content p,
.about-content p,
.re-card-text,
.cc-text p {
    text-align: left;
    hyphens: manual;
    -webkit-hyphens: manual;
    overflow-wrap: break-word;
    word-break: normal;
}
.cd-description p { margin: 0 0 .85rem; }
/* Aufzaehlungen mit haengendem Einzug: die zweite Zeile eines Punktes
   ruecken unter den Text, nicht unter den Punkt. */
.cd-description .heft-liste {
    margin: 0 0 .85rem; padding-left: 1.15rem;
    list-style: none;
}
.cd-description .heft-liste li {
    position: relative; margin-bottom: .3rem; padding-left: .15rem;
}
.cd-description .heft-liste li::before {
    content: "\2022"; position: absolute; left: -.95rem; top: 0;
    color: var(--gwr-primary); font-weight: 700;
}
.cd-description p:last-child { margin-bottom: 0; }

/* Ueberschriften, Aufzaehlungen und kurze Zeilen bleiben linksbuendig:
   Blocksatz auf zwei Woertern sieht auseinandergerissen aus. */
.cms-seitentext.cms-content li { text-align: left; }

/* ============================================================
   Termine als Tabelle

   Vorher war es eine Liste mit Rasterspalten. Fehlte ein Wert, rutschte
   alles nach rechts und die Zeile stand leer da. Eine Tabelle haelt die
   Spalten an ihrem Platz, richtet alles links aus und wird von
   Vorleseprogrammen als Tabelle angesagt.
   ============================================================ */
.cd-treffen-huelle {
    border: 1px solid #e8ebe9; border-radius: 10px;
    overflow-x: auto; margin: 0 0 1rem;
}
.cd-treffen {
    width: 100%; border-collapse: collapse;
    font-size: .84rem; text-align: left;
}
.cd-treffen th {
    text-align: left; font-weight: 600; font-size: .68rem;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--gwr-muted);
    background: #fafbfa;
    padding: .5rem .8rem;
    border-bottom: 1px solid #e8ebe9;
    white-space: nowrap;
}
.cd-treffen td {
    padding: .5rem .8rem;
    border-bottom: 1px solid #f2f4f3;
    vertical-align: middle;
}
.cd-treffen tbody tr:last-child td { border-bottom: 0; }
.cd-treffen tbody tr:hover td { background: #fafbfa; }

.cd-treffen-datum { white-space: nowrap; }
.cd-treffen-nr {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.35rem; height: 1.35rem; margin-right: .45rem;
    border-radius: 50%; background: var(--prog-soft, var(--gwr-sand));
    color: var(--prog-primary, var(--gwr-primary));
    font-size: .68rem; font-weight: 700;
}
.cd-treffen-tag { color: var(--prog-primary, var(--gwr-primary)); font-weight: 600; margin-right: .3rem; }
.cd-treffen-tagdatum { color: var(--gwr-dark); }
.cd-treffen-zeit { color: var(--gwr-muted); white-space: nowrap; }
.cd-treffen-dauer {
    display: inline-block;
    background: var(--prog-soft, var(--gwr-sand));
    color: var(--prog-primary, var(--gwr-primary));
    font-weight: 600; font-size: .72rem;
    padding: .1rem .45rem; border-radius: 4px; white-space: nowrap;
}
.cd-treffen-sp-ort { color: var(--gwr-muted); }
.cd-treffen-notiz td {
    font-size: .74rem; color: var(--gwr-muted);
    padding-top: 0; padding-bottom: .5rem;
}

@media (max-width: 767.98px) {
    /* Auf dem Telefon zaehlen Datum, Uhrzeit und Ort. Die Dauer ist
       fuer alle Treffen gleich und steht schon oben im Umfang. */
    .cd-treffen-sp-dauer { display: none; }
    .cd-treffen { font-size: .78rem; }
    .cd-treffen th, .cd-treffen td { padding: .45rem .55rem; }
    .cd-treffen-nr { display: none; }
}