/*
Theme Name:  Ehrenamt Weyhe
Theme URI:   https://www.ehrenamt-weyhe.de
Description: 1:1 Nachbau des JYAML-Designs (Joomla 3) von ehrenamt-weyhe.de
Version:     1.0.0
Author:      Ehrenamt Weyhe
Text Domain: ehrenamt-weyhe

Layout-Struktur (entspricht 1:1 dem Original-HTML):

  .ym-wrapper (zentriert, weiß)
    #header           → H1 "Agenda 21" (visuell versteckt) + Header-Bild
    #main (Flex-Row)
      #col1           → Vertikales Menü + Ameise-Modul (LINKE Spalte)
      #col3           → Hauptinhalt + footer_logos.png (RECHTE/Haupt-Spalte)
    #footer            → Impressum | Kontakt | Datenschutz
*/

/* =============================================================================
   RESET & BASIS
   ============================================================================= */

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

html {
    font-size: 100.01%; /* JYAML-Reset */
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 75%;        /* 12px Basis */
    color: #444444;
    background: #b3d1d1 !important;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

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

a {
    color: #4d87c7;
    text-decoration: none;
    background: transparent;
}

a:visited { color: #003366; }

a:hover, a:active {
    color: #182e7a;
    text-decoration: underline;
}

a:focus {
    text-decoration: underline;
    color: #000;
    background: #fff;
    outline: 3px #ff9933 solid;
}

/* =============================================================================
   2. WRAPPER (entspricht .ym-wrapper)
   ============================================================================= */

.ym-wrapper {
    text-align: left;
    margin: 0 auto;
    max-width: 980px;
    width: 100%;
    background: #ffffff;
	margin-top: 20px;
	margin-bottom: 10px;
}

.ym-wbox {
    width: 100%;
}

.ym-clearfix::after,
.ym-cbox::after {
    content: "";
    display: table;
    clear: both;
}

/* Skiplinks (Barrierefreiheit, optisch unsichtbar) */
.ym-skiplinks {
    position: absolute;
    left: -9000px;
}

.ym-skiplinks a:focus {
    position: static;
    left: auto;
}

@media (max-width: 982px) {
    .ym-wrapper {
		max-width: 950px;
        margin-left: 16px !important;
		margin-right: 16px !important;
		margin-top: 0px !important;
    }
	
	html {
		margin-top: 0px !important;
	}
}

@media (max-width: 950px) {
    .ym-wrapper {
        margin-left: 0px !important;
		margin-right: 0px !important;
    }
}

/* =============================================================================
   3. HEADER
   Entspricht #header
   ============================================================================= */

#header {
    width: 100%;
    background: #b3d1d1 !important;
}

/* H1 "Agenda 21" – im Original visuell versteckt (ym-hideme), aber für SEO/A11y vorhanden */
#header h1,
.ym-hideme {
    position: absolute;
    left: -9000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Header-Bild Container */
#header_image .desktop,
#header_image .mobile {
    width: 100%;
}

#header_image {
    width: 100%;
    max-width: 100%;
}

#col3 #header_image img {
    width: 100%;
    height: auto;
    display: block;
}

#header_image .desktop { 
	display: block;
    max-width: 781px;
}

#header_image .mobile  {
	display: none;
}

@media (max-width: 982px) {
    #header_image .desktop,
    #header_image .desktop img {
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    #header_image .desktop {
        display: none !important;
    }

    /*#header_image .mobile {
        display: block !important;
    }*/
	
	#header_image .mobile {
        display: block !important;
        width: 100% !important;
    }

    #header_image .mobile img {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
}

/* =============================================================================
   MAIN-BEREICH: ZWEI SPALTEN (#col1 links, #col3 rechts)
   Entspricht #main.ym-column
   ============================================================================= */

/* Entspricht dem Abstand zwischen Sidebar-Menü und Artikeltext im Original */
.ym-contain-fl {
    margin-left: 76px;
	margin-right: 76px;
    padding-left: 10px;
	padding-right: 50px;
}

.blog-content, .blog-categories {
    margin-left: 76px;
	margin-right: 76px;
    padding-left: 10px;
	padding-right: 50px;
}

.ym-contain-fl p,
.ym-contain-fl img,
.ym-contain-fl ul,
.ym-contain-fl ol,
.kontakt-formular {
    margin: 0 0 1em 20px;
    padding-left: 30px;
    line-height: 1.5em;
}

.ym-contain-fl img.no-active-style, .page-id-181 .wp-block-paragraph {
	margin-left: 0px;
    padding-left: 0px;
    line-height: 1.5em;
}

.page-id-181 .spCategoryContainer {
	margin-left: -50px;
}

.ym-contain-fl ul,
.ym-contain-fl ol {
    padding-left: 80px;
}

.ym-contain-fl ul li,
.ym-contain-fl ol li {
    margin-bottom: 0.5em;
}

.ym-contain-fl ul {
    list-style-type: disc;
}

.ym-contain-fl ul li {
    list-style-type: disc;
}

#main {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
}

@media (max-width: 982px) {
    .ym-contain-fl {
        margin: 0px !important;
    }
}

/* ───────────────────────────────────────
   #col1 – LINKE SPALTE: Vertikales Menü
   ─────────────────────────────────────── */

#col1 {
    flex: 0 0 200px;
    width: 200px;
    background: #b3d1d1 !important;
}

#col1_content {
    padding: 25px 0px 0px 0px;
}

/* col1 (Sidebar mit Menü) ausblenden unter 982px */
@media (max-width: 982px) {
    #col1, .mobile {
        display: none !important;
    }
}

/* ───────────────────────────────────────
   Columns
   ─────────────────────────────────────── */

#col3 {
    flex: 1;
    min-width: 0;
    background: #fff;
}

#col3_content {
    padding: 30px 10px 15px 0;
}

/* Artikel-Wrapper */
.item-page {
    width: 100%;
}

.page-header {
    margin-bottom: 0.5em;
}

.page-header.entry-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.page-header.entry-header .entry-title {
    margin: 0;
}

.entry-actions {
    margin-left: auto;
}

.print-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #f2f3f5;
    color: #333;
    border: 1px solid #c2c5cc;
    padding: 0.45rem 0.85rem;
    border-radius: 0.35rem;
    text-decoration: none;
}

.print-link:hover {
    background: #e4e6ea;
}

.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

.SobiPro .btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.btn-blue {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

.btn-blue:hover {
    color: #fff;
    background-color: #265d8c;
    border-color: #2e6da4;
}

@media (max-width: 982px) {
    #col3_content {
		padding-right: 0px !important;
		padding-left: 0px !important;
	}
}

/* =============================================================================
   Vertikales Seitenmenü
============================================================================= */

.ym-vlist {
    width: 100%;
    margin: 0 0 1.5rem;
}

.ym-vlist ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ym-vlist li {
    margin: 0 0 5px;
    line-height: 1.3;
    position: relative;
}

/* Links */
.ym-vlist a {
    display: block;
    width: 64%;
    padding: 3px 15px 3px 12px;
    color: #991915;
    text-decoration: none;
    transition: all .2s ease;
}

.ym-vlist li a {
    display: block;
    width: 80%;
    box-sizing: border-box;
    padding: 3px 15px 3px 12px;
}

/* Hover */
.ym-vlist a:hover {
    color: #991915;
    font-weight: bold;
}

.ym-vlist a:focus,
.ym-vlist a:active {
    outline: none;
    box-shadow: none;
}

.ym-vlist a:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Aktiver Menüpunkt */
.ym-vlist .current-menu-item > a,
.ym-vlist .current_page_item > a,
.ym-vlist .current-menu-ancestor > a {
    color: #f60;
    font-weight: bold;
    /*background: #fff url("../images/nav_reiter.gif") no-repeat left center;*/
}

.ym-vlist .sub-menu .current-menu-item > a {
    background: #ffffff !important;
    color: #f60 !important;
    font-weight: bold;
}

.ym-vlist .sub-menu {
    display: none;
}

.ym-vlist .current-menu-item > .sub-menu,
.ym-vlist .current-menu-ancestor > .sub-menu {
    display: block;
}

.ym-vlist .current-menu-ancestor > a {
    /*background: #67a5a4 url("../images/nav_reiter.gif") no-repeat left center;*/
    color: #ffffff;
    font-weight: bold;
}

.ym-vlist .sub-menu li {
    margin: 0;
    line-height: 1.5;
}

.ym-vlist .sub-menu a {
    padding-left: 28px;
    font-size: .95em;
	background: #67a5a4;
	color: #fff;
}

/* Fokusrahmen für Menüeinträge vollständig entfernen */
.ym-vlist a,
.ym-vlist a:focus,
.ym-vlist a:focus-visible,
.ym-vlist a:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    -webkit-tap-highlight-color: transparent;
}

.ym-vlist .sub-menu a:focus,
.ym-vlist .sub-menu a:focus-visible,
.ym-vlist .sub-menu a:active {
	color: #333;
}

/* KEIN Active Styling für diesen Menüpunkt */
.ym-vlist li.no-active-style > a,
.ym-vlist li.no-active-style.current-menu-item > a,
.ym-vlist li.no-active-style.current_page_item > a,
.ym-vlist li.no-active-style.current-menu-ancestor > a {
    background: transparent !important;
    color: #991915 !important;
    font-weight: normal !important;
}


/* =============================================================================
   MOBIL NAVIGATION
   ============================================================================= */

/* Burger-Icon aus drei Linien */
.burger-icon {
    display: inline-flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 20px !important;
    height: 14px !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
    cursor: pointer !important;
}

.burger-icon span {
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    background-color: #ffffff !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
}

/* X-Animation wenn Menü offen */
.mobile-nav-open .burger-icon span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
}

.mobile-nav-open .burger-icon span:nth-child(2) {
    opacity: 0 !important;
}

.mobile-nav-open .burger-icon span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
}

/* Mobil-Nav: standardmäßig ausgeblendet */
.jyaml-mobilenav {
    display: none;
    background: #ffffff;
    text-align: left;
}

/* Unter 983px einblenden */
@media (max-width: 982px) {
    .jyaml-mobilenav {
        display: block !important;
        margin-left: 16px !important;
		margin-right: 16px !important;
    }
}

@media (max-width: 950px) {
    .jyaml-mobilenav {
        margin-left: 0px !important;
		margin-right: 0px !important;
    }
}

/* Titel-Leiste (Menü-Button) */
.jyaml-mobilenav .mobilenav-title {
    background: #b3d1d1;
    padding: 5px 8px;
    font-size: 16px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
    color: #ffffff;
    user-select: none;
}

.jyaml-mobilenav .mobilenav-title:hover {
    background: #9abfbf;
}

/* Aktiver Seitenname */
.jyaml-mobilenav .mobilenav-active {
    font-weight: normal;
}

/* Menü-Liste */
.jyaml-mobilenav .mobilenav-menu {
    font-size: 14px;
    border-bottom: 3px solid #45484d;
}

.jyaml-mobilenav .mobilenav-menu ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.jyaml-mobilenav .mobilenav-menu ul li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #000 !important;
}

.jyaml-mobilenav .mobilenav-menu ul li:last-child {
    border-bottom: 0px solid #000 !important;
}

.jyaml-mobilenav .mobilenav-menu ul li a {
    display: block !important;
    width: 100% !important;
    padding: 5px 12px !important;
    background: #ffffff !important;
    color: #f60 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
}

.jyaml-mobilenav .mobilenav-menu ul li a:hover {
    background: #f5f5f5 !important;
    color: #182e7a !important;
}

/* Aktiver Menüpunkt */
.jyaml-mobilenav .mobilenav-menu ul li.current-menu-item > a {
    color: #ffffff !important;
    font-weight: bold !important;
    background: #f60 !important;
}

/* Untermenüs im Mobil-Menü standardmäßig ausgeblendet */
.jyaml-mobilenav .mobilenav-menu .sub-menu {
    display: none;
}

/* Untermenü anzeigen, wenn Hauptseite aktiv ist */
.jyaml-mobilenav .mobilenav-menu li.current-menu-item > .sub-menu,
.jyaml-mobilenav .mobilenav-menu li.current-menu-parent > .sub-menu,
.jyaml-mobilenav .mobilenav-menu li.current-page-parent > .sub-menu,
.jyaml-mobilenav .mobilenav-menu li.current_page_parent > .sub-menu,
.jyaml-mobilenav .mobilenav-menu li.current_page_ancestor > .sub-menu,
.jyaml-mobilenav .mobilenav-menu li.current-menu-ancestor > .sub-menu {
    display: block;
}

/* Untermenü-Links eingerückt */
.jyaml-mobilenav .mobilenav-menu ul .sub-menu li a {
    padding-left: 24px !important;
    background: #ffffff !important;
    font-size: 14px !important;
    color: #f60 !important;
    border-top: 0px solid #000 !important;
}

.jyaml-mobilenav .mobilenav-menu ul .sub-menu li:first-child a {
    border-top: 1px solid #000 !important;
}

.jyaml-mobilenav .mobilenav-menu ul .sub-menu li a:hover {
    background: #eeeeee !important;
    color: #182e7a !important;
}

/* Aktiver Sub-Menüpunkt */
.jyaml-mobilenav .mobilenav-menu ul .sub-menu li.current-menu-item > a {
    color: #ffffff !important;
    font-weight: bold !important;
    background: #f60 !important;
}

/* Aktive Seite */
.ym-vlist .current-menu-item > a,
.ym-vlist .current_page_item > a {
    position: relative;
    background: #fff;
    color: #f60;
    font-weight: bold;
}

.ym-vlist .current-menu-item > a::before,
.ym-vlist .current_page_item > a::before {
    content: "";
    position: absolute;
    left: -105px;
    top: 50%;
    transform: translateY(-50%);
    width: 130px;
    height: 24px;
    background: url("/images/nav_reiter2.gif") no-repeat center center;
}

/* Elternseite einer aktiven Unterseite */
.ym-vlist .current-menu-ancestor > a {
    position: relative;
    background: #67a5a4 !important;
    font-weight: bold;
}

.ym-vlist .current-menu-ancestor > a::before {
    content: "";
    position: absolute;
    left: -105px;
    top: 50%;
    transform: translateY(-50%);
    width: 130px;
    height: 24px;
    background: url("/images/nav_reiter.gif") no-repeat center center;
}

/* Hover über einem Elternelement */
.ym-vlist .menu-item-has-children > a:hover {
    position: relative;
    /*background: #b3d1d1 !important;*/
    font-weight: bold;
}

.ym-vlist .menu-item-has-children > a:hover::before {
    content: "";
    position: absolute;
    left: -105px;
    top: 50%;
    transform: translateY(-50%);
    width: 130px;
    height: 24px;
    background: url("/images/nav_reiter2.gif") no-repeat center center;
}

.ym-vlist li:not(.menu-item-has-children) > a:hover::before {
    content: "";
    position: absolute;
    left: -105px;
    top: 50%;
    transform: translateY(-50%);
    width: 130px;
    height: 24px;
    background: url("/images/nav_reiter2.gif") no-repeat center center;
}

/* Hover auf aktivem Elternelement -> aktive Grafik beibehalten */
.ym-vlist .current-menu-ancestor > a:hover::before {
    background: url("/images/nav_reiter.gif") no-repeat center center;
}

/* =============================================================================
   AMEISE-MODUL
   ============================================================================= */

.customgame-module {
    display: inline-block;
    text-align: center;
}

.module-box {
    margin-bottom: 15px;
}

.game-module-img {
    text-align: left;
    margin: 0 0 5px 0;
    padding-left: 10px;
}

.game-module-img {
    text-align: left;
	padding-left: 10px;
}

.game-module-img img {
    display: block;
    margin: 0 auto;
}

.game-module-link {
    display: block;
    text-align: center;
    width: 100%;
    margin-top: 5px;
}

.game-module-link a {
    color: #036;
    text-decoration: none;
}

.game-module-link a:hover {
    text-decoration: underline;
    color: #036;
}

.ameise-mobile {
    display: none !important;
}

@media (max-width: 982px) {
    /* page-header als Positions-Kontext */
    .page-header {
        position: relative !important;
    }
	
    .ameise-mobile {
        display: block !important;
        position: absolute !important;
		padding-top: 25px;
		right: -40px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
    }
	
	.ameise-mobile img {
        width: 80px !important;
        height: auto !important;
        max-width: 80px !important;
        display: block !important;
    }
}

@media (max-width: 200px) {	
    .ameise-mobile {
        right: -40px !important;
    }
}

/* =============================================================================
   TYPOGRAFIE
   ============================================================================= */

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    color: #ff6600;
    font-family: Courier, "Courier New", Monaco, monospace;
    margin: 0 0 0.25em 0;
}

h1 { font-size: 250%; }
h2 { font-size: 200%; margin-bottom: 16px; }
h3 { font-size: 150%; }
h4 { font-size: 133.33%; }
h5 { font-size: 116.67%; }
h6 { font-size: 116.67%; }

/* Artikeltitel (entspricht h2[itemprop="headline"]) */
.entry-title {
    font-weight: bold;
    color: #ff6600;
    font-family: Courier, "Courier New", Monaco, monospace;
    font-size: 200%;
    margin: 0 0 16px 0;
}

.blue-color, .kontakt-formular h3 {
	color: #3f8bd7 !important;
}

p {
    line-height: 1.5em;
    margin: 0 0 1em 0;
}

strong, b { font-weight: bold; }
em, i     { font-style: italic; }

/* =============================================================================
   FOOTER-LOGOS (innerhalb #col3, unter dem Artikel)
   Entspricht .logos
   ============================================================================= */

.logos {
    margin-left: 76px;
    padding: 15px 0 15px 45px;
    text-align: left;
}

.logos img {
    display: block;
    max-width: 532px;
    height: auto;
}


@media (max-width: 982px) {
    .logos {
		margin-left: 0px;
	}
}

@media (max-width: 650px) {
    .logos img {
		max-width: 425px;
	}
}


@media (max-width: 480px) {
    .logos img {
		max-width: 375px;
	}
}

@media (max-width: 450px) {
    .logos img {
		max-width: 320px;
	}
}

@media (max-width: 400px) {
    .logos img {
		max-width: 270px;
	}
}

@media (max-width: 300px) {
    .logos img {
		max-width: 240px;
	}
}

@media (max-width: 200px) {
    .logos img {
		max-width: 200px;
	}
}

/* =============================================================================
   FOOTER (Impressum | Kontakt | Datenschutz)
   Entspricht #footer / #footer_content
   ============================================================================= */

#footer {
    width: 100%;
    background: #b3d1d1;
    border-top: 0px solid #eeeeee;
}

#footer_content {
    padding: 10px;
	padding-left: 0px;
    text-align: left;
    font-size: 91.7%;
    line-height: 1.5em;
}

#footer_content ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

#footer_content ul li {
    margin: 0;
    padding: 0;
}

#footer_content ul li:not(:last-child)::after {
    content: "|";
    color: #ffffff;
    padding: 0 8px;   /* gleichmäßig links UND rechts */
}

#footer_content a {
    color: #ffffff;
    background: transparent;
    font-weight: bold;
    text-decoration: none;
}

#footer_content a:hover {
    color: #ffffff;
    text-decoration: underline;
}

#footer_content a:visited {
    color: #ffffff;
}

@media (max-width: 982px) {
	#footer_content {
		padding-left: 10px;
	}
}

/* =============================================================================
   NINJA FORMS – Vollständiges CSS
   Layout: Label links (30%), Input rechts (69%)
   Entspricht dem Visforms-Design der Joomla-Referenzseite
   ============================================================================= */

.nf-form-content .nf-field-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;       /* wrap für Beschreibungstext-Zeile */
    align-items: flex-start !important;
    margin-top: 10px !important;
    margin-bottom: 8px !important;
    overflow: visible !important;
    position: relative !important;
}

.nf-form-content .nf-field {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    width: 100% !important;
}

.nf-form-content .field-wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    width: 100% !important;
}

.nf-form-content .nf-field-label {
    flex: 0 0 30% !important;
    width: 30% !important;
    min-width: 30% !important;
    max-width: 30% !important;
    float: none !important;
    margin-top: 6px !important;
    margin-right: 1% !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: 1em !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    order: 1 !important;
}

.nf-form-content .nf-field-label label {
    display: block !important;
    text-align: left !important;
    font-weight: bold !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    color: #444444 !important;
    cursor: default !important;
}

.nf-form-content .nf-field-element {
    flex: 1 1 69% !important;
    width: 69% !important;
    float: none !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
    order: 2 !important;
}

/* Alle Input-Typen */
.nf-form-content .nf-field-element input[type="text"],
.nf-form-content .nf-field-element input[type="email"],
.nf-form-content .nf-field-element input[type="tel"],
.nf-form-content .nf-field-element input[type="url"],
.nf-form-content .nf-field-element input[type="number"],
.nf-form-content .nf-field-element input[type="date"],
.nf-form-content .nf-field-element input[type="password"],
.nf-form-content .nf-field-element textarea,
.nf-form-content .nf-field-element select,
.nf-form-content .nf-field-element .ninja-forms-field,
.nf-form-content .nf-field-element .nf-element {
    width: 100% !important;
    max-width: 100% !important;
    padding: 4px 6px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1em !important;
    border: 1px solid #cccccc !important;
    box-sizing: border-box !important;
    display: block !important;
    color: #444444 !important;
    background: #ffffff !important;
    line-height: 1.4 !important;
}

/* Textarea: Mindesthöhe */
.nf-form-content .nf-field-element textarea {
    min-height: 80px !important;
    resize: vertical !important;
}

/* Select: Mehrfachauswahl (Listbox) */
.nf-form-content .nf-field-element select[multiple] {
    min-height: 120px !important;
}

/* Input Fokus */
.nf-form-content .nf-field-element input:focus,
.nf-form-content .nf-field-element textarea:focus,
.nf-form-content .nf-field-element select:focus {
    border-color: #4d87c7 !important;
    outline: none !important;
    box-shadow: 0 0 3px rgba(77, 135, 199, 0.3) !important;
}

.nf-form-content .nf-field-description,
.nf-form-content .field-description {
    flex: 0 0 100% !important;
    width: 100% !important;
    order: 3 !important;
    padding-left: 26% !important;
    font-size: 0.9em !important;
    color: #666666 !important;
    margin-top: 3px !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
    line-height: 1.4 !important;
    font-style: italic !important;
}

.nf-form-content .nf-before-field,
.nf-form-content .nf-after-field {
    display: none !important;
}

/* Kein Label beim Submit */
.nf-form-content .submit-container .nf-field-label {
    display: none !important;
}

/* Button zentriert */
.nf-form-content .submit-container .nf-field-element {
    display: flex !important;
    justify-content: center !important;
    flex: 1 1 100% !important;
    width: 100% !important;
}

.nf-form-content .nf-field-element input[type="submit"],
.nf-form-content .nf-field-element button[type="submit"] {
    width: auto !important;
    padding: 6px 20px !important;
    background: #dddddd !important;
    border: 1px solid #aaaaaa !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1em !important;
    cursor: pointer !important;
    color: #333333 !important;
}

.nf-form-content .nf-field-element input[type="submit"]:hover,
.nf-form-content .nf-field-element button[type="submit"]:hover {
    background: #cccccc !important;
}

.nf-error-wrap {
    flex: 0 0 100% !important;
    flex-basis: 100% !important;
    width: 100% !important;
    margin-left: 31% !important;
    padding-left: 0 !important;
    box-sizing: border-box !important;
    order: 4 !important;
}

.nf-error-wrap .nf-error-msg,
.nf-form-content .nf-error .nf-error-msg {
    color: #cc0000 !important;
    font-size: 0.85em !important;
    display: block !important;
    margin-top: 3px !important;
}

/* Fehlerfeld-Markierung */
.nf-form-content .nf-error input,
.nf-form-content .nf-error textarea,
.nf-form-content .nf-error select {
    border-color: #cc0000 !important;
}

.nf-form-fields-required {
    color: red !important;
    padding: 0 !important;
    font-size: 0.83em !important;
    font-weight: bold !important;
    margin-bottom: 10px !important;
    display: block !important;
}

/* Pflichtfeld-Stern */
.ninja-forms-req-symbol {
    color: red !important;
    font-weight: bold !important;
}

.nf-form-title {
    display: none !important;
}

/* Grüner Balken: komplett ausblenden, Ninja Forms zeigt ihn per JS */
/*.nf-response-msg {
    display: none !important;
}*/

/* Ninja Forms setzt .visible per JavaScript nach Absenden */
/*.nf-response-msg.visible {
    display: block !important;
    padding: 10px !important;
    margin: 10px 0 !important;
    background: #eaf3de !important;
    border: 1px solid #3b6d11 !important;
    color: #3b6d11 !important;
}*/

.nf-response-msg p {
	margin-left: 0px;
	padding-left: 0px;
}

.nf-form-hp {
    display: none !important;
    visibility: hidden !important;
}

/* Select-Optionen */
.nf-form-content .nf-field-element select option {
    color: #737373 !important;
}

/* Radio-Labels */
.nf-form-content .nf-field-element .nf-radio-option label,
.nf-form-content .nf-field-element input[type="radio"] + label,
.nf-form-content .listcheckbox-container label,
.nf-form-content .listradio-container label {
	margin-left: 0px !important;
    color: #737373 !important;
}

.nf-form-content .nf-field-element ul {
    margin: 0 !important;
    padding: 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
}

/* Listenelement ebenfalls bündig */
.nf-form-content .nf-field-element li {
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
}

/* Radio-Gruppe etwas nach links verschieben */
.nf-form-content .listradio-wrap .nf-field-element,
.nf-form-content .radiolist-wrap .nf-field-element {
    padding-left: 0 !important;
    margin-left: -4px !important;   /* Wert ggf. auf -6px oder -8px erhöhen */
}

.nf-form-content .nf-field-element ul {
    margin: 0;
    padding: 0;
}

.nf-form-content .nf-field-element li {
    display: flex;
    align-items: flex-start;   /* statt baseline */
    margin-bottom: 4px;
}

.nf-form-content .nf-field-element input[type="radio"] {
    margin-top: 3px;
    margin-right: 6px;
    flex-shrink: 0;
}

.nf-form-content .nf-field-element input[type="radio"] + label {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    vertical-align: top !important;
    align-self: flex-start !important;
}

@media (max-width: 982px) {
    .nf-form-content .nf-field-description {
        padding-left: 31% !important;
    }
	
	.nf-form-content .nf-field-description p {
		padding-left: 5px !important;
		padding-top: 5px !important;
	}
}

@media (max-width: 600px) {

    .nf-form-content .nf-field-container {
        flex-direction: column !important;
    }

    .nf-form-content .nf-field,
    .nf-form-content .field-wrap {
        flex-direction: column !important;
    }

    .nf-form-content .nf-field-label {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 4px !important;
    }

    .nf-form-content .nf-field-element {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    .nf-form-content .nf-field-description {
        padding-left: 0 !important;
    }
	
	.nf-form-content .nf-field-description p {
		padding-left: 5px !important;
		padding-top: 5px !important;
	}

    .nf-error-wrap {
        margin-left: 0 !important;
    }
}

/* Radio-/Checkbox-Liste */
.nf-form-content .nf-field-element ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.nf-form-content .nf-field-element li {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
}

/* Radio/Checkbox */
.nf-form-content input[type="radio"],
.nf-form-content input[type="checkbox"] {
    margin: 0 !important;
    flex: 0 0 auto !important;
}

/* Labels */
.nf-form-content .nf-field-element .nf-radio-option label,
.nf-form-content .nf-field-element input[type="radio"] + label,
.nf-form-content .listcheckbox-container label,
.nf-form-content .listradio-container label {
    margin: 0 !important;
    padding: 0 !important;
    color: #737373 !important;
    line-height: 1.4 !important;
    display: inline-block !important;
    flex: 1 !important;
}

/* Keine Einrückung der Radio-Gruppe */
.nf-form-content .listradio-wrap .nf-field-element,
.nf-form-content .radiolist-wrap .nf-field-element {
    margin: 0 !important;
    padding: 0 !important;
}

/* =============================================================================
   E-Card
   ============================================================================= */

/* Sommer */
/* E-Card Formular (Formular ID 2) – gelber Hintergrund + abgerundete Ecken */
#nf-form-2-cont .ninja-forms-field,
#nf-form-2-cont .nf-element {
    background-color: #ffc013 !important;
    max-width: 94% !important;
    border-radius: 5px !important;
}

/* Textarea separat (falls unterschiedliche Größe gewünscht) */
#nf-form-2-cont textarea.ninja-forms-field {
    background-color: #ffc013 !important;
    max-width: 94% !important;
    border-radius: 5px !important;
}

/* Input-Felder */
#nf-form-2-cont input[type="text"].ninja-forms-field,
#nf-form-2-cont input[type="email"].ninja-forms-field {
    background-color: #ffc013 !important;
    max-width: 94% !important;
    border-radius: 5px !important;
}

/* Submit-Button ausschließen – kein gelber Hintergrund */
#nf-form-2-cont input[type="submit"].ninja-forms-field {
    background-color: #dddddd !important;
    max-width: none !important;
    border-radius: 5px !important;
}


/* Müll sammeln */

/* E-Card Formular ID 3 – grün-gelber Hintergrund + abgerundete Ecken */
#nf-form-3-cont .ninja-forms-field,
#nf-form-3-cont .nf-element {
    color: #fff900 !important;
    background-color: #c1cf00 !important;
    max-width: 94% !important;
    border-radius: 5px !important;
}

/* Textarea */
#nf-form-3-cont textarea.ninja-forms-field {
    color: #fff900 !important;
    background-color: #c1cf00 !important;
    max-width: 94% !important;
    border-radius: 5px !important;
}

/* Input-Felder */
#nf-form-3-cont input[type="text"].ninja-forms-field,
#nf-form-3-cont input[type="email"].ninja-forms-field {
    color: #fff900 !important;
    background-color: #c1cf00 !important;
    max-width: 94% !important;
    border-radius: 5px !important;
}

/* Submit-Button: eigener Stil */
#nf-form-3-cont input[type="submit"].ninja-forms-field {
    color: #333333 !important;
    background-color: #dddddd !important;
    max-width: none !important;
    border-radius: 5px !important;
}

/* =============================================================================
   Kategorie-Archiv: einfache klickbare Einträge
   ============================================================================= */

/* SobiPro-like category styles */
.SobiPro .pageheader.lead,
.spListing.category h1,
.spListing .pageheader.lead {
	font-weight: bold !important;
	color: #3f8bd7 !important;
	font-family: Courier, "Courier New", Monaco, monospace !important;
	font-size: 200% !important;
	margin: 0 0 16px !important;
}

.SobiPro .spListing.category {
	margin-left: 76px;
	padding-left: 10px;
}

.SobiPro .lead {
	margin-bottom: 20px;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.4;
}

@media (max-width: 982px) {
    .SobiPro .spListing.category, .blog-content, .blog-categories {
        margin: 0px !important;
    }
}

@media (min-width: 768px) {
	.SobiPro .lead {
		font-size: 21px;
	}
}

.SobiPro .h1,
.SobiPro .h2,
.SobiPro .h3,
.SobiPro .h4,
.SobiPro .h5,
.SobiPro .h6,
.SobiPro h1,
.SobiPro h2,
.SobiPro h3,
.SobiPro h4,
.SobiPro h5,
.SobiPro h6 {
	font-family: inherit;
	font-weight: 500;
	line-height: 1.1;
	color: inherit;
}

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

.row-fluid,
.row {
	display: flex;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px;
}

.row-fluid > [class^="span"],
.row > [class^="span"] {
	position: relative;
	width: 100%;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
	-ms-flex-preferred-size: 0;
	flex-basis: 0;
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	max-width: 100%;
}

.span12 {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
}

.spEntryContainer .row-fluid {
	margin: 0;
}

.spEntryContainer .row-fluid > .span12 {
	position: relative;
	width: 100%;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
	-webkit-box-flex: 0;
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
}

.spEntryContainer .row-fluid + .row-fluid {
	margin-top: 20px;
}

.SobiPro .page-header {
	padding-bottom: 9px;
	margin: 40px 0 20px;
	border-bottom: 1px solid #eee;
}

.spEntryContainer h2.lead.page-header {
	font-size: 1.5rem;
	margin: 0;
	padding: 0;
	font-weight: 500;
	line-height: 1.3;
}

#main .SobiPro .spEntryContainer h2.lead.page-header a,
.SobiPro .spEntryContainer h2.lead.page-header a {
	color: #3f8bd7 !important;
	text-decoration: none;
}

#main .SobiPro .spEntryContainer h2.lead.page-header a:hover,
.SobiPro .spEntryContainer h2.lead.page-header a:hover {
	text-decoration: underline;
}

.spCategoryDesc {
	margin-bottom: 20px;
}

.spCategoryFields .clearfix {
	clear: both;
}

/* SobiPro list entry details */
.SobiPro .spEntryContainer .row-fluid {
	margin-top: 18px;
}

.SobiPro .spEntryContainer .row-fluid:first-child {
	margin-top: 0;
}

.SobiPro .spEntryContainer .row-fluid .span12 {
	padding-right: 15px;
	padding-left: 0px;
	margin-top: 40px;
	margin-bottom: 20px;
}

.SobiPro .spEntryContainer h2.lead.page-header {
	font-size: 1.4rem;
	margin: 0;
	padding: 0;
	font-weight: 500;
	line-height: 1.2;
}

.SobiPro .spEntryContainer h2.lead.page-header a {
	color: #3f8bd7 !important;
	text-decoration: none;
  font-family: Courier, "Courier New", Monaco, monospace !important;
}

.SobiPro .spEntryContainer h2.lead.page-header a:hover {
	text-decoration: underline;
}

@media (max-width: 480px) {
    .spCategoryContainer > .row-fluid {
        flex-direction: column !important;
    }

    .spCategoryContainer > .row-fluid > .span6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 850px) {
    #main {
        flex-direction: column;
    }

    #col1, #col3 {
        flex: 1 1 100%;
        width: 100%;
    }

    #col3_content {
        padding-left: 10px;
    }
}

@media (max-width: 600px) {
    h1 { font-size: 175%; }
    h2 { font-size: 150%; }
}

/* =============================================================================
   SOBIPRO KATEGORIENLISTE – CSS-Nachbau für WordPress
   Entspricht der Darstellung auf ehrenamt-weyhe.de/zeit-spende/zeitdatenbank/
   ============================================================================= */

/* Innere Zeile: Icon + Text nebeneinander */
.spCategoryContainer .spCat .row-fluid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0px !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* Icon-Container: feste Breite */
.spCategoryContainer .spCat .span3 {
    flex: 0 0 50px !important;
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    padding: 0 !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}

/* Text-Container: restliche Breite */
.spCategoryContainer .spCat .span9 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
}

/* =============================================================================
   Cookie-Banner
   ============================================================================= */

#cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #adadad;
    color: #fff;
    z-index: 99999;
    padding: 15px 5%;
}

#cookie-banner .cookie-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

#cookie-banner .cookie-text {
    flex: 1;
}

#cookie-banner .cookie-text p {
    margin: 0;
    line-height: 1.6;
}

#cookie-banner .cookie-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#cookie-banner .cookie-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}

#cookie-banner button {
    padding: 10px 18px;
    border: 0;
    background: #333;
    color: #fff;
    cursor: pointer;
}

#cookie-banner button:hover {
    background: black;
}

#cookie-banner .cookie-info {
    color: #fff;
    text-decoration: none;
}

#cookie-banner .cookie-info:hover {
    text-decoration: underline;
}

@media (max-width:768px) {

    #cookie-banner .cookie-content {
        flex-direction: column;
        text-align: center;
    }

    #cookie-banner .cookie-actions {
        width: 100%;
    }

    #cookie-banner .cookie-buttons {
        justify-content: center;
    }
}

/* =============================================================================
   Druckansicht
   ============================================================================= */

@media print {

    /* Alles ausblenden */
    body * {
        display: none !important;
    }

    /* Nur den eigentlichen Artikel drucken */
    .item-page,
    .item-page * {
        display: block !important;
    }

    /* Überschriften anzeigen */
    .item-page h1,
    .item-page .page-header {
        display: block !important;
    }

    /* Inline-Elemente wieder inline darstellen */
    .item-page p,
    .item-page a,
    .item-page strong,
    .item-page em,
    .item-page span {
        display: inline !important;
    }

    /* Artikel oben links platzieren */
    .item-page {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* Druck-Button ausblenden */
    .entry-actions,
    .print-link {
        display: none !important;
    }

    /* Überschriften */
    .item-page h1 {
        font-size: 26pt;
        margin: 0 0 12px;
    }

    .page-header {
        margin-bottom: 20px;
    }

    .page-header h2 {
        font-size: 20pt;
        margin: 0;
    }

    /* Fließtext */
    .blog-content {
        font-size: 12pt;
        line-height: 1.6;
    }

    .blog-content p {
        display: block !important;
        margin: 0 0 10px;
    }

    /* Kategorien und Logos nicht drucken */
    .blog-categories,
    .logos {
        display: none !important;
    }

    /* URL hinter Links ausgeben */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
    }

    @page {
        margin: 2cm;
    }
}

/*@media print {
    body * {
        visibility: hidden;
    }

    .entry-content,
    .entry-content * ,
    .page-header,
    .page-header *,
    .printable {
        visibility: visible;
    }

    .printable {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .print-link,
    .print-link *,
    .site-header,
    .site-footer,
    .main-navigation,
    .sidebar,
    .entry-actions {
        display: none !important;
    }

    .entry-content {
        margin: 0;
        padding: 0;
        font-size: 12pt;
        line-height: 1.5;
    }

    a::after {
        content: " (" attr(href) ")";
        font-size: 90%;
    }
}*/

/* Playground */