/*
Theme Name: LA26
Theme URI: 
Author: ONEnWEB
Author URI: 
Description: Individuelles Block-Theme für Langer August e. V..
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: la26
Tags: 
*/
/* montserrat-regular- latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/montserrat-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('assets/fonts/montserrat-v31-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('assets/fonts/montserrat-v31-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-slab-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/roboto-slab-v36-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-slab-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 500;
  src: url('assets/fonts/roboto-slab-v36-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-slab-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 600;
  src: url('assets/fonts/roboto-slab-v36-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-slab-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: url('assets/fonts/roboto-slab-v36-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
  --bs-blue: #0db6e8;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #c8096d;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #e2e828;
  --bs-green: #198754;
  --bs-teal: #1abc9c;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #f8f9fa;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #1abc9c;
  --bs-secondary: #2c3e50;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 26, 188, 156;
  --bs-secondary-rgb: 44, 62, 80;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 248, 249, 250/*255, 255, 255*/;
  --bs-white:#f6f7f8;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
  --bs-border-width: 0.125rem;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.5rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.75rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #1abc9c;
  --bs-link-hover-color: #15967d;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}
a {
    text-decoration: none!important;
    color:var(--bs-pink)
}
a:hover{color:var(--bs-yellow)}
.bg-yellow a:hover{color:var(--bs-pink)}
.bg-pink a {color:var(--bs-yellow)}
.bg-pink a:hover {color:var(--bs-black)}
.bg-black a.wp-block-latest-posts__post-title{color:#fff}
.bg-black a.wp-block-latest-posts__post-title:hover{color:var(--bs-pink)}

*[id] {
    scroll-margin-top: 148px; 
}
hr {
    /* 1. Standard-Linie unsichtbar machen */
    border: none;
    border-width: 0 0 0px 0!important;
        /* 2. Höhe des Bildes definieren */
    height: 50px; /* Passen Sie dies an die Höhe Ihres Bildes an */
    
    /* 3. Das Bild einfügen und zentrieren */
    background-image: url('/wp-content/uploads/2026/06/trenner2.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain; /* Sorgt dafür, dass das Bild nicht verzerrt wird */
    
    /* 4. Optionaler Abstand nach oben und unten */
    margin: 30px 0;
    opacity:1;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 700;
  line-height: 1.2;
}
h5.archiv-title{font-size:1rem;text-transform:none}
/* 1. Den Standard-Pfeil in allen Browsern komplett ausblenden */
.wp-block-details summary {
    list-style: none !important; /* Für moderne Browser */
}
.wp-block-details summary::-webkit-details-marker {
    display: none !important; /* Für ältere Safari/Chrome Versionen */
}

.wp-block-details summary {
    position: relative;
    padding-left: 65px; /* Abstand erhöhen, falls das Bild breiter ist */
    cursor: pointer;
    text-transform: uppercase;
    font-size:1.4rem;
    font-weight: bold;
}
.wp-block-details[open] summary {color: #000;}  
.wp-block-details[open] summary::before { filter: unset;}

/* Icon */
.wp-block-details summary::before,.simpletoc-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    /*transform: translateY(-50%);*/ /* Zentriert das Bild vertikal zum Text */
    width: 2rem;  /* Wunschbreite des Icons */
    height: 1.7rem; /* Wunschhöhe des Icons */
    background-image: url('/wp-content/uploads/2026/06/pfeil1.png');
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.2s ease; /* Macht die Drehung geschmeidig */
        filter: invert(100%); 
}
.simpletoc-list li a {color:var(--bs-black)}
.simpletoc-list li a:hover {color:var(--bs-pink)}
.simpletoc-list li:hover::before{filter: invert(15%) sepia(95%) saturate(4171%) hue-rotate(314deg) brightness(81%) contrast(97%);
}

.simpletoc-list li::before {
        filter: invert(0%); 
}
ul.simpletoc-list {
    list-style-type: none;padding-top:2rem;
font-family: "Montserrat";font-weight: 700;text-transform:uppercase}
ul.simpletoc-list li{ position: relative !important;padding-left:2.1rem;
position: relative !important;
    font-size: 0.8rem;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 99%;
    padding: 3px 0px;
    padding-left: 2.1rem;
}

.wp-block-details[open] summary::before {
    transform: translateY(-50%) rotate(90deg); /* Dreht den Pfeil um 90 Grad nach unten */
}
.aktive img, .aktive img{
  filter: grayscale(100%);
  opacity:0.6;
  width:80%;
  margin:0 auto;
}

.aktive a{color:#0c0c0c;text-decoration:none;font-weight:700}
.aktive .col{padding-right:0;padding-left:0}
.aktive .img2 img{  width:90%}
.aktive .img5 img{  width:90%}
.aktive .img9 img{  width:60%}
.aktive .img10 img {  width:100%}


.aktive img:hover,.initiativen img:hover {
  filter: grayscale(0);
  opacity: 1;
}
.navbar-collapse.collapse.show,.navbar-collapse.collapsing{background: #f8f9fa;padding-bottom:30px;}

.wp-site-blocks {padding-bottom: 0;padding-top: 0;}/*Wrapper um die Seite*/
:where(.wp-site-blocks) > * {
    margin-block-start: 0 !important;
}
.masthead {padding-top: 128px;}
.masthead .row > *{padding-right:0;padding-left:0}
.masthead-1 {
  padding-bottom: 0rem;
  background-color:var(--bs-pink);
    margin-block-start: revert !important;
}
.page-id-5096 h1.rotate-on-sm {
    font-size: 6.4rem;
    margin-left: 2.7rem;
}
.page-id-5096 figure.rotate-on-sm {
    margin-left: 3.5rem;
}

.masthead-2{padding-left:2rem!important;font-family:"Montserrat"; font-weight:600;}
.masthead-2 a{color:#0c0c0c;text-decoration:none}
.masthead-2 a:hover{color:var(--bs-yellow);}
.masthead-2 ul li{
display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 99%;
    }
.masthead .container-fluid,.masthead .container-fluid .row{padding:0;margin:0}
.masthead-1{padding-bottom: 0rem;}
.masthead-2{background:var(--bs-blue);padding-left:2rem;padding-top:2rem;padding-bottom: 2rem;}
.masthead-3{background:var(--bs-pink);padding-bottom: 6rem}
.masthead-4{background:var(--bs-yellow);padding-bottom: 6rem;min-height:14rem}
.masthead .masthead-heading {
  font-size: 2.75rem;
  line-height: 2.75rem;
}
.masthead .masthead-subheading {
  font-size: 1.25rem;
}
.masthead .masthead-avatar {
  width: 15rem;
}
  #mainNav {height: 128px;}

#mainNav a {
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 700;
}
#mainNav .navbar-brand {
  color: #fff;
}
#mainNav .navbar-nav {
  margin-top: 1rem;
}
#mainNav .navbar-nav li.nav-item a.nav-link {
  color: #0b0b0b;
}
#mainNav .navbar-nav li.nav-item a.nav-link:hover {
  color: #1abc9c;
}
#mainNav .navbar-nav li.nav-item a.nav-link:active, #mainNav .navbar-nav li.nav-item a.nav-link:focus {
  color: #fff;
}
#mainNav .navbar-nav li.nav-item a.nav-link.active {
  color: #1abc9c;
}
#mainNav .navbar-toggler {
  font-size: 80%;
  padding: 0.8rem;
}


.wp-block-latest-posts__list a.wp-block-latest-posts__post-title{font-weight: normal;  font-size: 1.5rem;font-family: "Montserrat", sans-serif;}
.masthead .wp-block-latest-posts__list a.wp-block-latest-posts__post-title{font-size: 1rem;font-weight: 600;}



.btn-link {
  --bs-btn-color: #0c0c0c;
  text-decoration: none
  }
  .accordion-button:not(.collapsed) {
  color: var(--bs-accordion-active-color);
  }
  .accordion-item {
  margin-bottom: 0.5rem;
}
.masthead .masthead-heading {
    font-size: 5rem;
    line-height: 2.75rem;padding-bottom: 4rem;
}
.accordion-item:last-of-type{  margin-bottom: 0rem;}
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1,.wp-block-heading {
 font-family: "Montserrat", sans-serif;text-transform:uppercase}
 h2, .h2{color:var(--bs-black);} 
section {
  padding: 6rem 0;
  margin-block-start: 0 !important;
}
.page-section .page-section-heading,h2.wp-block-heading {
  font-size: 2.25rem;
  line-height: 2rem;
  text-align: center;
    padding-top: 5rem;
    margin-bottom: 3rem;
}
.page-section .page-section-heading::after ,h2.wp-block-heading::after/*,h3.wp-block-heading::after*/{
    content: url('/wp-content/uploads/2026/06/trenner2.png');
    display: block; /* Sorgt dafür, dass Abstände und Größen greifen */
    vertical-align: middle; /* Richtet das Bild mittig zur Texthöhe aus */
    margin: 1.25rem 0 1.5rem;
    margin-bottom: 3rem !important;
}
.bg-black.page-section .page-section-heading::after,.bg-pink.page-section .page-section-heading::after,.bg-black h2.wp-block-heading::after/*,.bg-black h3.wp-block-heading::after*/ {
filter: invert(100%)!important; 
}
.page-section.aktive{background:#f8f9fa;padding: 0rem 0;}

@media (min-width: 992px) {
  .page-section .page-section-heading {
    font-size: 3rem;
    line-height: 2.5rem;
  }
}
  h2.page-section-heading{    hyphens: auto;
    overflow-wrap: break-word;    line-height: 2.5rem!important;}
h1.masthead-heading, .page-section-heading{font-family: "Anton", sans-serif;font-weight: 500}
.masthead .masthead-avatar {
    width: 8rem;
}

/*a{text-decoration:underline;color:unset;}
a:hover{text-decoration:underline;color:var(--bs-yellow);}*/
#mainNav .navbar-nav li.nav-item a.nav-link:hover {
    color:var(--bs-pink);
}
#mainNav .navbar-nav li.nav-item a.nav-link:active, #mainNav .navbar-nav li.nav-item a.nav-link:focus {
  color:var(--bs-yellow);
}
nav.subnav .wp-block-navigation__container{flex-direction: column;}
section.backblack h2{color:#fff;}
.backblack {background: #0c0c0c;color:#fff}
.backpink {background: #0c0c0c;color:#fff}
.col-8 h2{font-size:1.5rem}
 .accordion-button:not(.collapsed) {
  color: #0c0c0c;
  font-weight:600;
}

/*SEARCH*/
.search-click {
  border: 1px solid #ccc;
  outline: none;
  background-size: 22px;
  background-position: 13px;
  border-radius: 10px;
  width: 50px;
  height: 50px;
  padding: 25px;
  transition: all 0.5s;
}
.search-click:focus {
  width: 300px;
  padding-right: 50px;
}
.search-click {
  position: relative;
  overflow: hidden;
  height: 50px;
}
.search-click input {
  background: transparent;
  border: 1px solid #ccc;
  outline: none;
  position: absolute;
  width: 300px;
  height: 50px;
  left: 0%;
  padding: 10px;
}
/*SEARCH*/

/*POST-LIST*/
/* Erstellt ein festes zweispaltiges Raster */
section .wp-block-latest-posts li {
    display: grid !important;
    grid-template-columns: 150px 1fr; /* Linke Spalte fix 150px für das Bild, rechte Spalte flexibel */
    grid-template-rows: auto auto;    /* Zwei Zeilen: oben Titel, unten Text */
    gap: 5px 20px;                    /* 5px Abstand zwischen Titel/Text, 20px Abstand zum Bild */
    margin-bottom: 30px;              /* Abstand zum nächsten Beitrag */
}

/* Positioniert das Bild in der linken Spalte über beide Zeilen */
section .wp-block-latest-posts li .wp-block-latest-posts__featured-image {
    grid-column: 1;
    grid-row: 1 / span 2; /* Streckt das Bild über die Zeile von Titel und Text */
    float: none !important;
    margin: 0 !important;
}

/* Positioniert den Titel oben rechts */
section .wp-block-latest-posts li a.wp-block-latest-posts__post-title {
    grid-column: 2;
    grid-row: 1;
    display: block;
    font-weight: bold;
    text-decoration: none;
    padding: 0 0 0 15px;
}

/* Positioniert den Text unten rechts (exakt unter den Titel) */
section .wp-block-latest-posts li .wp-block-latest-posts__post-excerpt {
    grid-column: 2;
    grid-row: 2;
    margin: 0 !important;
    padding: 0 0 0 15px;
}

/* Mobil-Optimierung: Auf Handys alles untereinander darstellen */
@media (max-width: 600px) {
section .wp-block-latest-posts li {
        display: flex !important;
        flex-direction: column;
        gap: 15px;
    }
section .wp-block-latest-posts li a.wp-block-latest-posts__post-title {padding: 0 0px;}
section .wp-block-latest-posts li .wp-block-latest-posts__post-excerpt {padding: 0 0px;}

}





#was-findet-statt ul.wp-block-latest-posts.wp-block-latest-posts__list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* Exakt 2 Spalten */
    gap: 24px !important;                             /* Abstand zwischen den Beiträgen */
}

/* 3. Macht das Layout mobilfreundlich (1 Spalte auf Smartphones) */
@media (max-width: 767px) {
#was-findet-statt ul.wp-block-latest-posts.wp-block-latest-posts__list {
        grid-template-columns: 1fr !important;
    }
    
section .col-12.col-lg-6:nth-child(2){margin-top:2rem}    
    
}

/* 1. Den geschriebenen Text unsichtbar machen, aber den Link-Button behalten */
.wp-block-latest-posts__read-more,
.wp-block-post-excerpt__more-link {
    font-size: 0 !important; /* Versteckt den Text */
    display: inline-block !important;
    line-height: 0 !important;
}

/* 2. Das eigene Bild als Weiterlesen-Button einfügen */
.wp-block-latest-posts__read-more::before,
.wp-block-post-excerpt__more-link::before {
    content: "";
    display: inline-block;
    width: 50px;  /* Gewünschte Breite deines Bildes */
    height: 10px;  /* Gewünschte Höhe deines Bildes */
    background-image: url('/wp-content/uploads/2026/06/pfeil1.png'); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center left;
    cursor: pointer;
            filter: invert(100%); 
}

/* 3. Optional: Dein Wunsch-Pink #c8096d beim Hovern aktivieren */
.wp-block-latest-posts__read-more:hover::before,
.wp-block-post-excerpt__more-link:hover::before {
    filter: invert(15%) sepia(95%) saturate(4171%) hue-rotate(314deg) brightness(81%) contrast(97%) !important;
}



/*POST-LIST*/





.accordion-button:not(.collapsed)::after {
  background-image: url('../assets/img/arrow-down.png');
}
.accordion-button::after {
  flex-shrink: 0;
background-image: url('../assets/img/arrow-down.png');
  }
 body {
  font-family: "Roboto Slab", serif;}

 
.rotate-on-sm {
  transform: none;
  align-self: center; /* zentriert innerhalb der Col */
  margin-bottom: 0;
}
@media (min-width: 420px) {
.page-id-5096 h1.rotate-on-sm {
    font-size: 7rem;
    margin-left: 2.7rem;
}
.page-id-5096 figure.rotate-on-sm {
    margin-left: 4rem;
}
}
/* Unter lg-Bildschirmen */
@media (max-width: 991px) {
  #was-findet-statt p{font-size:1rem}
#mainNav .container{padding:0;width:100%;max-width:100%;}

ul#menu-mainmenue {
    padding-right: 2rem;
}
img.masthead-avatar {
    margin-left: 2rem;
}
.search-container{float:right;width:30%;margin-right:2rem;}

.masthead .masthead-avatar {
  width: 8rem;
}
#mainNav .navbar-toggler {
    font-size: 150%;background-color:transparent!important;margin-right:2rem
}
nav .collapsing ul li,nav .collapse.show ul li{text-align:right;}
.masthead-2 p,h5.archiv-title {margin-bottom: 0.5rem;padding-right: 1.5rem;}
.masthead-4 {
    padding-bottom: 2rem;
    padding-top: 2rem;
}

 .custom-col {
    flex: 0 0 20%; /* 100% / 10 = 10% width per column */
    max-width: 20%;}
}
@media (min-width: 576px) {
 /* Definiert ein festes zweispaltiges Raster */
ul.wp-block-archives-list {
    display: grid !important;
    
    
    /* Bestimmt die genaue Anzahl der Monate in der linken Spalte */
    grid-template-rows: repeat(100, auto) !important;
    
    /* Zwingt die Monate von oben nach unten durchzulaufen */
    grid-auto-flow: column !important;
    
    grid-gap: 12px 40px !important;
    list-style-type: none !important;
    padding-left: 0 !important;
}

 }
#regelmaessig details{margin-left:20%} 
   
@media (min-width: 768px) {
.masthead .masthead-heading {
    font-size: 6.3rem;
    line-height: 1rem;
}
  .page-id-5096 .masthead .masthead-heading {
    font-size: 11rem;
    /*line-height: 8.75rem;*/
  }

  .custom-col {
    flex: 0 0 10%; /* 100% / 10 = 10% width per column */
    max-width: 10%;
  }
    #verein .text{column-count: 2;
  column-gap: 2rem;}


}

.text-secondary.text-pink{color:var(--bs-pink)!important;}
.text-secondary.text-blue{color:var(--bs-blue)!important;}
.text-secondary.text-yellow{color:var(--bs-yellow)!important;}
.text-secondary.text-black{color:var(--bs-black-rgb)!important;}

.bg-pink{background-color:var(--bs-pink);color:var(--bs-light);}
.bg-blue{background-color:var(--bs-blue);color:#000}
.bg-yellow{background-color:var(--bs-yellow);color:#000}
.bg-black{background-color:var(--bs-black-rgb);color:#f8f9fa}
.bg-white{background-color:var(--bs-black-rgb);color:#000}
.bg-pink .divider-custom-icon img,.bg-black .divider-custom-icon img{ filter: brightness(0) invert(1);}
.bg-pink h2, .bg-black h2{color:#fff}
.bg-yellow h2, .bg-blue h2,.bg-yellow, .bg-blue{color:#2c3e50;}
/*vEREIN*/
body.verein .nav-link {
    display: block;
    padding: 0;
}
/*section.start{padding-top: calc(6rem + 97px);
    padding-bottom: 0rem;}*/
/*VEREIN*/
figcaption {color:#555555}
#deineveranstaltung .img1{width:45%;transform: rotate(-15deg);transition: transform 0.8s ease; }
#deineveranstaltung .img1 figcaption{text-align:right}
#deineveranstaltung .img2{width:45%;transform: rotate(15deg); transition: transform 1.2s ease;margin-top:2rem}
#deineveranstaltung .img1:hover,#deineveranstaltung .img2:hover{  transform: rotate(0deg) scale(1.5);  }

#verein{background:#e1e732;}

.footer {
  padding-top: 5rem;
  padding-bottom:3rem;
  color: #0c0c0c;
}
footer ul.wp-block-navigation__container {display:block;list-style-type:none;font-family: "Montserrat";text-transform:uppercase;}

.footer a{color:#0c0c0c;text-decoration:none;font-weight: 600;}
footer .row> .col-lg-3:nth-child(4) p{font-size:0.8rem}
.copyright {background-color: #1a252f;}
/*Veranstaltungen dark*/
#portfolio{background:#0c0c0c}

#was-findet-statt p, #was-findet-statt .col-8 h2,#was-findet-statt h2.page-section-heading{color:#fff!important}
#portfolio .col-8 h2{font-weight:normal}
#portfolio .col-8 img,#portfolio .divider-custom-icon img {filter: invert(1);}
/*Veranstaltungen dark*/


@media (max-width: 767px) {
.masthead-4 ul{padding-left: 1rem;    font-size: 14px}
img.masthead-avatar { width:180px}
  .rotate-on-sm {
    transform: rotate(-90deg);
    align-self: flex-start;  /* an den linken Rand der Col */
    margin-bottom: 0;        /* unten innerhalb der Col */
    /* Optional leicht nach links verschieben, wenn Col Padding hat */
    margin-left: -1.7rem; 
  }
.page-id-5096 h1.rotate-on-sm{
        margin-top: 10px;
    }
    
.page-id-5096 figure.rotate-on-sm {
    margin-top: -60px;
}

.rotate-on-sm.wp-block-post-title{word-break:normal}

footer .name{text-align:center}
}


@media (min-width: 1024px) {

.text2col{column-count: 2;
    column-gap: 2rem;
  }
  }
/* WordPress Navigations-Menü bei 992px zum Burger machen */
@media (max-width: 991.98px) {
    .wp-block-navigation__responsive-container-open {
        display: flex !important; /* Zeigt den Burger-Button */
    }
    .wp-block-navigation__responsive-container {
        display: none !important; /* Versteckt das normale horizontale Menü */
    }
}

@media (max-width: 767px) {
  figure.masthead-avatar {
    width: 180px;
  }
footer .container {
    width: 100%;
    max-width: 100%;
}
}
@media (min-width: 992px) {

  .masthead {
    /*padding-top: 104px;*/
    /*padding-bottom: 6rem;*/
  }
  .masthead .masthead-subheading {
    font-size: 1.5rem;
  }
  #portfolio p{font-size:1rem}

  .masthead .masthead-subheading {
    font-size: 1.2rem;
  }

  .masthead-1{align-items:center !important;text-align:center;}
  .masthead-4 {
    padding-bottom: 6rem;
} 
  


     .wp-block-navigation__responsive-container-open {
        display: none !important; /* Versteckt den Burger auf Desktop */
    }
    .wp-block-navigation__responsive-container {
        display: flex !important; /* Zeigt das normale Menü auf Desktop */
    } 
  #mainNav {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    transition: padding-top 0.3s, padding-bottom 0.3s;
  }
  #mainNav .navbar-brand {
    font-size: 1.75em;
    transition: font-size 0.3s;
  }
  #mainNav .navbar-nav {
    margin-top: 0;
  }
  #mainNav .navbar-nav > li.nav-item > a.nav-link.active {
    color: #fff;
    background: #1abc9c;
  }
  #mainNav .navbar-nav > li.nav-item > a.nav-link.active:active, #mainNav .navbar-nav > li.nav-item > a.nav-link.active:focus, #mainNav .navbar-nav > li.nav-item > a.nav-link.active:hover {
    color: #fff;
    background: #1abc9c;
  }
  #mainNav.navbar-shrink {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  #mainNav.navbar-shrink .navbar-brand {
    font-size: 1.5em;
  }
  .wp-block-latest-posts li a.wp-block-latest-posts__post-title {padding: 0 15px;}
.wp-block-latest-posts li .wp-block-latest-posts__post-excerpt {padding: 0 15px;}

}