/* ================================================================ */
/* CSS-VARIABLEN */
/* ================================================================ */
:root {
--orange: #f29100;
--magenta: #e5007c;
--blau: #1b4fab;
--gruen: #75b727;
}

/* ================================================================ */
/* ALLGEMEINE STYLES */
/* ================================================================ */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
line-height: 1.4;
background: url("/images/150Jahre/wappenelemente-bg.png");
background-repeat: repeat;
background-size: cover;
font-color: #4f4f4f;
font-size: 1.2em;
}

img {
border: 0;
padding: 0;
}

/* ================================================================ */
/* LAYOUT-CONTAINER */
/* ================================================================ */
#all {
width: 100% !important;
}

#content {
background: transparent;
margin-top: -150px;
padding-left: 0 !important;
padding-right: 0 !important;
padding: 0px 0px 18px 0px !important;
}

.container150Jahre {
max-width: 100%;
float: none;
margin: 0;
width: 100%;
justify-content: center;
align-items: center;
padding-left: 0;
padding-right: 0;
}

/* ================================================================ */
/* TYPOGRAFIE */
/* ================================================================ */
h2 {
color: #e5007c !important;
border-bottom: none !important;
font-weight: 800 !important;
}

a, a:hover, a:visited {
color: #e5007c;
}

.text_links a {
	color: #e5007c !important;
}

.ueberschrift_themenseite div {
font-size: .85em;
margin-bottom: 20px;
}

/* ================================================================ */
/* LOGO */
/* ================================================================ */
.logo {
position: absolute;
z-index: 300;
top: 40px;
left: 25px;
}

.logo img {
display: block;
width: 17%;
height: auto;
margin-top: 5%;
}

.logo a img {
height: 122px;
width: 200px;
}

/* ================================================================ */
/* NAVIGATION */
/* ================================================================ */
#smartnav {
position: fixed;
background: none;
z-index: 250;
padding: 40px 25px;
top: 0px;
right: 50px;
left: unset;
width: fit-content;
}

#smartnav #shownav {
font-size: 4em;
background: #1b4fab;
border-radius: 60px;
padding: 15px;
}

#smartnav, #smartnavpush {
display: inline !important;
}

#smartnav img.noprint {
display: none;
}

#header {
position: fixed;
width: 100%;
top: 0;
z-index: 200;
}

#header ul {
list-style: none;
}

#header ul li {
border-top: 1px solid #cecece;
}

#header ul li a {
color: #fff;
font-family: "Open Sans",Verdana,Arial,Helvetica,sans-serif;
display: block;
padding: 8px 15px;
}

#nav_small {
background: #1b4fab;
color: #fff;
padding: 150px 20px;
position: fixed;
top: 0;
right: 0;
width: 25%;
height: 100vh;
}

#header .mehr {
display: none;
}

/* ================================================================ */
/* ROWS UND SPALTEN */
/* ================================================================ */
.rowTop {
max-width: 100%;
width: 100%;
height: auto;
position: relative;
z-index: 200;
pointer-events: none;
}

.rowTop img {
max-width: 100%;
width: 100%;
}

.row1 .row2 .row3 .rowBottem .col1 .col2 .col3 {
border: none;
border: 0;
}

.row1 {
position: relative;
z-index: 200;
margin-bottom: -300px;
border: none;
}

.row1 img {
display: block;
width: 100%;
}

.row2 {
display: flex;
position: relative;
padding: 0;
margin-bottom: 1.5%;
}

.row2 .col {
flex: 1;
padding: 0px;
}

.row2 .col img {
width: 100%;
height: auto;
display: block;
}

.row3 {
margin: 20px 10px;
text-align: center;
background-image: "Ablage/wappenelemente-bg.png";
background-repeat: repeat-y;
}

.row3 img {
max-width: 100%;
height: auto;
display: inline-block;
}

.rowBottem {
position: relative;
z-index: 100;
margin-top: -100px;
border: none;
}

.rowBottem img {
display: block;
width: 100%;
height: auto;
}

#spalte_links {
text-align: center;
}

/* ================================================================ */
/* PARALLAX-HINTERGRÜNDE */
/* ================================================================ */
#bg-1 {
width: 100%;
height: 65vh;
background: url('/images/150Jahre/bg-fix-hsh.jpg') top center;
background-position-x: center;
background-position-y: top;
background-attachment: scroll;
background-attachment: fixed;
background-size: auto;
background-size: cover;
position: relative;
}

#bg-2 {
width: 100%;
height: 65vh;
background: url('/images/150Jahre/bg-fix-hauptbahnhof.jpg') top center;
background-position-x: center;
background-position-y: top;
background-attachment: scroll;
background-attachment: fixed;
background-size: auto;
background-size: cover;
position: relative;
}

#bg-3 {
width: 100%;
height: 65vh;
background: url('/images/bg-fix-bild3.jpg') top center;
background-position-x: center;
background-position-y: top;
background-attachment: scroll;
background-attachment: fixed;
background-size: auto;
background-size: cover;
position: relative;
}

.bg-fixed-image {
margin: 3vh 0;
border-bottom: 1.5vh solid var(--gruen);
margin: 15rem 0 15rem 0;
}

/* ================================================================ */
/* BACK TO TOP */
/* ================================================================ */
#backtotop {
background: #1b4fab;
opacity: .8 !important;
}

#backtotop:hover {
background: #1b4fab;
opacity: 1 !important;
}

/* ================================================================ */
/* CMS BUTTON */
/* ================================================================ */
.CmsButtonTop {
z-index: 999999;
position: absolute;
top: 10px;
right: 10px;
}

/* ================================================================ */
/* SOCIAL MEDIA */
/* ================================================================ */
.socialMediastyle {
display: flex;
justify-content: center;
}

/* ================================================================ */
/* FOOTER */
/* ================================================================ */
#footer {
background: #00479a;
margin-left: auto;
margin-right: auto;
height: 15em;
z-index: 100;
}

#footer .logo {
position: relative;
float: left;
display: inline-block;
top: 0;
left: 0;
}

#footer img {
width: 150px;
height: auto !important;
}

#footer .text {
display: inline-block;
color: #fff;
padding: 0px;
}

#sizeselect a {
background: none;
}

#sizeselect a.current {
background: #75b727;
}

#sizeselect a:hover, #sizeselect a:focus, #sizeselect a:active {
background: #75b727;
}

#sizeselect li {
border: 1px solid #fff;
}

/* ================================================================ */
/* CONSENT MANAGER */
/* ================================================================ */
#consentManager:hover, #consentManager:hover {
background: #1b4fab;
}

#consentManager {
background: #1b4fab;
}

/* ================================================================ */
/* TIMELINE-ELEMENT */
/* ================================================================ */
.timeline-element {
margin-top: 10rem;
margin-bottom: 10rem;
}

.timeline-Headline {
text-align: center;
color: #f39100;
margin: 10rem 0 0.2em;
font-size: 3rem;
font-weight: 800;
position: relative;
z-index: 6000;
transition: color 0.3s ease;
}

.timeline-nav {
text-align: center;
margin-bottom: 10rem;
}

.timeline-nav a {
position: relative;
display: inline-block;
margin: 0 10px;
color: #333;
font-weight: bold;
text-decoration: none !important;
padding-bottom: 4px;
font-size: 2rem;
color: black;
margin-left: 1rem;
}

.timeline-nav a::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: transparent;
transition: background 0.3s;
}

.timeline-nav a.active::after {
background: var(--underline-color) !important;
}

.timeline-section {
display: none;
}

.timeline-section.active {
display: block;
}

.timeline-wrapper {
position: relative;
}

.timeline-container {
position: relative;
margin: 40px 0;
}

.timeline-container::before {
content: '';
position: absolute;
top: 0; bottom: 0;
left: 50%;
width: 2px;
background: #ccc;
transform: translateX(-50%);
z-index: 1;
}

.timeline-item {
position: relative;
margin: 40px 0;
width: 100%;
}

.timeline-content {
position: relative;
padding: 10px 15px;
z-index: 2;
}
.timeline-item.left .image-with-caption .vertical-caption {
left: auto !important;
right: 0 !important;
text-align: right !important;
}
.timeline-content p {
margin-bottom: 4rem;
margin-top: -18px;
font-size: 1.4rem;
color: black;
margin-left: 4rem;
margin-right: -14px;
}

.timeline-item.right .timeline-content {
margin-left: 3rem;
}

.timeline-item.left.timeline-content {
margin-left: 3rem;
}

.year-label {
position: absolute;
top: 0;
font-weight: bold;
color: #333;
z-index: 2;
font-size: 2rem;
font-weight: 600;
color: black;
margin-top: -40px;
}

.dot {
position: absolute;
left: 50%;
width: 12px;
height: 12px;
background: #f39100;
border-radius: 50%;
transform: translateX(-33%);
scale: 1.5;
z-index: 3;
transition: background 0.3s;
}

/* Timeline-Farben */
.timeline-section.orange .dot { background: #f39100 !important; }
.timeline-section.pink .dot { background: #e5007d !important; }
.timeline-section.green .dot { background: #75b727 !important; }

.timeline-section.orange .timeline-content a {
color: #f39100 !important;
}
.timeline-section.pink .timeline-content a {
color: #e5007d !important;
}
.timeline-section.green .timeline-content a {
color: #75b727 !important;
}
.timeline-content a {
display: block;
}

.timeline-section.orange .timeline-content a:hover {
text-decoration: underline #f39100;
}
.timeline-section.pink .timeline-content a:hover {
text-decoration: underline #e5007d;
}
.timeline-section.green .timeline-content a:hover {
text-decoration: underline #75b727;
}

.timeline-Headline.orange { color: #f39100; }
.timeline-Headline.pink { color: #e5007d; }
.timeline-Headline.green { color: #75b727; }

.timeline-item .timeline-content {
width: 45%;
padding: 10px 15px;
position: relative;
}

.timeline-item .timeline-content {
top: 0;
width: 45%;
padding: 10px 15px;
}

.timeline-item.right .timeline-content {
margin-left: calc(50% + 20px);
text-align: left;
}

.timeline-item.left .timeline-content {
margin-right: calc(50% + 10px);
text-align: right;
}

.timeline-item .dot {
left: 50%;
transform: translateX(-33%);
}

.timeline-item .year-label {
left: 49.2%;
transform: translateX(-33%);
text-align: center;
padding-bottom: 12px;
}

.year-label {
margin-top: -60px;
background: #fff;
padding-bottom: 3px;
}

/* Timeline-Bilder und Videos */
.image-with-caption {
position: relative;
display: block;
overflow: hidden;
margin-top: 2rem;
margin-right: -10px;
width: 90%;
}
.vertical-caption {
          width: 267px !important;
}
.timeline-item.left .image-with-caption {
margin-left: calc(50% + -340px);
}

.timeline-item.right .image-with-caption {
margin-right: calc(50% + 20px);
}

.image-with-caption img {
display: block;
width: 100%;
}

.image-with-caption.vertical-image {
display: flex;
align-items: center;
margin-top: 2rem;
}

.image-with-caption.vertical-image img {
width: auto;
max-width: 500px;
          float: left;
}

.image-with-caption.vertical-image figcaption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0.5em 1em;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 0.9em;
font-style: italic;
box-sizing: border-box;
text-align: left;
width: 100% !important;
max-width: 500px;
}


.timeline-item.left .image-with-caption img {
margin-left: auto;
}

.video {
height: 400px;
margin-left: 64px;
margin-right: 64px;
}

.video iframe {
height: 70%;
width: 70%;
}
.timeline-item.right .image-with-caption {
margin-left: 60px
}

.image-with-caption figcaption {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 0.5em 1em;
background: rgba(0,0,0,0.6);
color: #fff;
font-size: 0.9em;
font-style: italic;
box-sizing: border-box;
}

left.timeline-content figure {
margin: 0.5em 0;
text-align: right !important;
}

right.timeline-content figure {
margin: 0.5em 0;
text-align: left !important;
}

.timeline-content figcaption {
font-size: 0.9em;
color: #fff;
font-style: italic;
text-align: left;
}

/* ================================================================ */
/* BENTO-GRID / MEDIENGALERIE */
/* ================================================================ */
.color-orange {
background-color: var(--orange);
}

.color-magenta {
background-color: var(--magenta);
}

.color-blau {
background-color: var(--blau);
}

.color-gruen {
background-color: var(--gruen);
}

.bentogrid {
display: grid;
gap: 7px;
grid-template-columns: repeat(6, 1fr);
}

.bentogrid [data-bento] {
position: relative;
overflow: hidden;
min-height: 200px;
}

.bentogrid a div h4:before,
.bentogrid a div h4:before {
	font-family: gelsenkirchen;
	content: "\e609";
	font-size: 0.8em;
    padding-right: 0.4em;
}

.bentogrid a[href^='http'] div h4:before,
.bentogrid a[href^='https'] div h4:before
 {
	content: "\e60a";
}

.bentogrid a[href^='https://www.gelsenkirchen.de'] div h4:before,
.bentogrid a[href^='http://www.gelsenkirchen.de'] div h4:before {
	content: "\e609";
}

.bentogrid a[href=''] div h4:before,
.bentogrid a[href='#'] div h4:before {
	content: "";
}

.bentogrid a[href=''],
.bentogrid a[href='#'] {
	cursor: default;
}



.youtube-container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.youtube-content {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}

.youtube-text {
position: absolute;
top: 0;
left: 0;
right: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, transparent 100%);
color: white;
padding: 15px;
z-index: 2;
font-size: 14px;
font-weight: 500;
opacity: 0;
transition: opacity 0.3s ease;
}

.youtube-container:hover .youtube-text {
opacity: 1;
}

.video-wrapper {
position: relative;
width: 100%;
height: 100%;
flex: 1;
}

.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
object-fit: cover;
}

.leer {
cursor: default !important;
}

.bentogrid [data-bento="1x1"] { grid-column: span 1; grid-row: span 1; }
.bentogrid [data-bento="2x1"] { grid-column: span 2; grid-row: span 1; }
.bentogrid [data-bento="2x2"] { grid-column: span 2; grid-row: span 2; }
.bentogrid [data-bento="2x3"] { grid-column: span 2; grid-row: span 3; }

.bentogrid [data-bento] > a {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: inherit;
text-decoration: none;
z-index: 1;
text-shadow: 2px 2px 2px #000;
}

.bentogrid .bild[data-bento] {
background-image: url('/images/dummy.gif');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

.bentogrid .youtube[data-bento]::before {
content: "\25B6";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2rem;
color: rgba(255,255,255,0.85);
z-index: 2;
pointer-events: none;
text-shadow: 0 2px 8px rgba(0,0,0,0.5);
background-color: rgba(0,0,0,0.7);
padding: 2px 25px;
border-radius: 15px;
}

.bentogrid .text[data-bento] .bottom {
flex-direction: column;
padding-bottom: 15px;
line-height: 2rem;
}

.bentogrid [data-bento] .bottom {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 100%;
padding: 10px;
box-sizing: border-box;
z-index: 2;
overflow: visible;
min-height: 0;
color: #fff;
}

.bentogrid [data-bento] .bottom .title {
font-size: 2rem;
font-weight: bold;
margin: 0;
text-align: right;
white-space: normal;
overflow: visible;
text-overflow: unset;
}

.bentogrid [data-bento] .bottom .image-description {
font-size: 0.9rem;
text-align: left;
}

.bentogrid [data-bento] .bottom .title-description {
font-size: 0.9rem;
text-align: right;
}

/* ================================================================ */
/* VERANSTALTUNGEN / SCOOP */
/* ================================================================ */
.veranstaltungen-section, .news-section {
max-width: 1500px;
margin: 0 auto;
padding: 20px;
}

.slider-panel, .grid-panel {
margin-bottom: 60px;
}

.carousel-title {
font-size: 2em;
color: #d6008f;
font-weight: 700;
text-align: center;
margin-bottom: 40px;
letter-spacing: -0.5px;
text-transform: uppercase;
}

.carousel-container {
position: relative;
margin-bottom: 30px;
}

.carousel {
display: flex;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: transform;
}

.slide {
min-width: 25%;
padding: 24px;
display: flex;
flex-direction: column;
box-sizing: border-box;
}

.slide-image {
width: 100%;
height: 200px;
margin-bottom: 16px;
position: relative;
overflow: hidden;
background-color: #f8f9fa;
}

.slide-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}

.slide:hover .slide-image img {
transform: scale(1.05);
}

.bildrechte {
font-size: 12px;
color: #ffffff;
background-color: rgba(0, 0, 0, 0.7);
padding: 10px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: left;
line-height: 1.2;
opacity: 0.8;
z-index: 10;
}

.star-icon {
position: absolute;
top: 12px;
right: 12px;
width: 28px;
height: 28px;
background: linear-gradient(135deg, #ffc600, #ff9500);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
box-shadow: 0 2px 8px rgba(255, 198, 0, 0.4);
z-index: 2;
}

.slide-content {
flex: 1;
display: flex;
flex-direction: column;
}

.slide-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
line-height: 1.3;
flex-grow: 1;
}

.slide-title a {
color: #333;
text-decoration: none;
transition: color 0.2s ease;
}

.slide-title a:hover {
color: #000;
text-decoration: underline;
}

.slide-title-vak {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
line-height: 1.3;
flex-grow: 1;
}

.slide-title-vak a {
color: #d6008f;
text-decoration: none;
transition: color 0.2s ease;
font-size: 1.2em;
}

.slide-title-vak a:hover {
color: #b8006f;
text-decoration: underline;
}

.slide-date {
font-size: 14px;
color: #666;
margin: 0 0 4px 0;
font-weight: 500;
}

.slide-location {
font-size: 12px;
color: #888;
font-style: italic;
}

.nav-arrow {
position: absolute;
top: 41%;
transform: translateY(-50%);
width: 48px;
height: 48px;
background: #0b3e99;
border: none;
border-radius: 50%;
color: white;
font-size: 20px;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 10;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.nav-arrow:hover {
transform: translateY(-50%) scale(1.1);
background: linear-gradient(135deg, #d6008f, #b8006f);
box-shadow: 0 6px 16px rgba(214, 0, 143, 0.3);
}

.nav-arrow:active {
transform: translateY(-50%) scale(0.95);
}

.nav-arrow.prev {
left: 15px;
}

.nav-arrow.next {
right: 15px;
}
/* Anyslide */
.slider-nspaltig{
background: none;
}
.anythingSlider .panel{
padding: 1rem;
}

.carousel div{
width: 100%;
}
.arrow{
position: absolute;
top: 41%;
transform: translateY(-50%);
width: 48px;
height: 48px;
background: #0b3e99;
border: none;
border-radius: 50%;
color: white;
font-size: 20px;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 10;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.anythingSlider .arrow a{
color: white;
}

.arrow a:hover {
background: none !important;
}

.arrow:hover {
translateY: (-50%) scale(1.1) !important;
background: linear-gradient(135deg, #d6008f, #b8006f) !important;
box-shadow: 0 6px 16px rgba(214, 0, 143, 0.3) !important;
border-radius: 50%;
}
.back{
left:33px;
}.forward{
right: -50px;
}
.slider-nspaltig li a:hover, .slider-nspaltig li a:active, .slider-nspaltig li a:focus {
border-color: none !important;
text-decoration: none;
}

/*element.style {
}*/
.slider-nspaltig li a:hover, .slider-nspaltig li a:active, .slider-nspaltig li a:focus {
border-color: none !important;
text-decoration: underline;
}
.slider-nspaltig li a,
.slider-nspaltig li a:hover,
.slider-nspaltig li a:active,
.slider-nspaltig li a:focus {
border: none !important;
}
.slider-nspaltig .arrow a span{
left: 0;
}

/*.slider-nspaltig li a:hover, .slider-nspaltig li a:active, .slider-nspaltig li a:focus{
border-color: white !important;
}*/
.anythingSlider .thumbNav{
display: block;
}

.thumbNav {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 8px;
align-items: center;
}

.thumbNav li {
margin: 0;
padding: 0;
}

.thumbNav a {
width: 40px;
height: 40px;
background-color: #ffffff;
border: 1px solid #ddd;
border-radius: 6px;
text-decoration: none;
color: #999;
font-size: 14px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.thumbNav a:hover {
background-color: #f0f0f0;
border-color: #bbb;
}

.thumbNav a.cur,
.thumbNav a.panel1.cur {
background-color: #e91e63;
color: white;
border-color: #e91e63;
}
.thumbNav li{
margin-left: 3px;
margin-right: 3px;
}


.thumbNav .titel {
display: none;
}

/* Responsive Design */
@media (min-width: 768px) and (max-width: 1024px) {
.timeline-item.left .image-with-caption .vertical-caption {
left: unset !important;
/* oder */
left: initial !important;
}
}
@media (max-width: 600px) {
.thumbNav {
flex-wrap: wrap;
gap: 6px;
}

.thumbNav a {
width: 35px;
height: 35px;
font-size: 12px;
}
}

@media(max-width: 768px){

.arrow{
top: 28%;
}
.back{
left: 33px;
}
.forward{
right: -46px;
}
.anythingSlider .anythingControls{
}
}

@media(max-width:1200px){
.back{
left: 33px;
}
}

.thumbNav li {
margin: 5px !important;
padding: 0 !important;
}

.thumbNav li a {
width: 40px !important;
height: 40px !important;
text-decoration: none !important;
border-radius: 6px !important;
background-color: #f0f0f0 !important;
color: #999 !important;
border: 1px solid #ddd !important;
/*transition: all 0.3s ease !important;*/
}

.thumbNav li a span {
width: 100% !important;
height: 100% !important;
}

.thumbNav li a .nummer {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
font-size: 14px !important;
font-weight: 500 !important;
}

.thumbNav li a .titel {
display: none !important;
}

/* Hover-Effekt für normale Buttons */
/*.thumbNav li a:hover {
background-color: #e0e0e0 !important;
color: #fff !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}*/

/* Aktiver Zustand - Pink Design */
.thumbNav li a.cur,
.thumbNav li a .cur {
background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%) !important;
color: white !important;
border: none !important;
box-shadow: 0 4px 12px rgba(233, 30, 99, 0.3) !important;
transform: translateY(-2px) !important;
}




.thumbNav li a:hover {
background: linear-gradient(135deg, #c2185b 0%, #ad1457 100%) !important;
color: #fff !important;
/*transform: translateY(-1px) !important;
box-shadow: 0 6px 16px rgba(233, 30, 99, 0.4) !important;*/
}

/* Responsive Design */
@media (max-width: 600px) {
.thumbNav {
flex-wrap: wrap !important;
justify-content: center !important;
}

.thumbNav li a {
width: 35px !important;
height: 35px !important;
}

.thumbNav li a .nummer {
font-size: 12px !important;
}
}

/* Änderungen */

#topTermineCarousel .slide-content {
height: 100%;
width: 100%;
display: block;
}

.anythingSlider .thumbNav {
display: inline-block;
}

.anythingSlider .anythingControls {
overflow: visible !important;
position: absolute;
bottom: -135px;
min-width: 90%;
}

.carousel-container {
margin-bottom: 150px;
}

.anythingWindow,
.anythingSlider .panel {
min-height: 450px;
}

#topTermineCarousel .slide-date {
margin-left: 8px;
}

#topTermineCarousel .forward {
right: 33px;
}

@media (max-width: 767px) {
.anythingSlider .anythingControls {
bottom: -50px;
}
}

@media (max-width: 600px) {
#topTermineCarousel {
min-height: 350px;
}

.anythingSlider .anythingControls {
bottom: 0;
min-width: 100%;
}

.carousel-container {
margin-bottom: 200px;
}

.anythingWindow,
.anythingSlider .panel {
min-height: 0px;
padding: 0;
}

.anythingSlider {
min-width: 100%;
padding: 0 !important;
}

#topTermineCarousel .forward {
right: -20px;
}

#topTermineCarousel .back {
left: -20px;
}

}
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
margin-top: 24px;
padding: 0 20px;
}

.pagination-number {
color: #cccccc;
cursor: pointer;
font-size: 16px;
font-weight: 600;
padding: 8px 12px;
border-radius: 6px;
transition: all 0.2s ease;
user-select: none;
min-width: 20px;
text-align: center;
}

.pagination-number:hover {
color: #ffff;
background-color: #e91e63;
}

.pagination-number.active {
color: #ffffff;
background-color: #d6008f;
transform: scale(1.1);
}

.termine-grid, .news-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
margin-bottom: 40px;
}

.termin-card, .news-card {
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
overflow: hidden;
transition: all 0.3s ease;
border: 1px solid #f0f0f0;
position: relative;
}

.termin-card:hover, .news-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0,0,0,0.12);
border-color: #d6008f;
}

.termin-image, .news-image {
width: 100%;
height: 200px;
position: relative;
overflow: hidden;
background-color: #f8f9fa;
}

.termin-image img, .news-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}

.termin-card:hover .termin-image img, .news-card:hover .news-image img {
transform: scale(1.05);
}

.termin-content, .news-content {
padding: 20px;
}

.termin-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 12px;
line-height: 1.4;
}

.termin-title a, .news-title a {
color: #d6008f;
text-decoration: none;
transition: color 0.2s ease;
}

.termin-title a:hover, .news-title a:hover {
color: #b8006f;
text-decoration: underline;
}

.termin-date, .news-date {
font-size: 14px;
color: #666;
margin-bottom: 8px;
font-weight: 500;
}

.termin-location, .news-location {
font-size: 13px;
color: #888;
margin-bottom: 8px;
font-style: italic;
}

.termin-kategorie, .news-kategorie {
font-size: 11px;
color: #d6008f;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.5px;
}

.fehler-panel {
text-align: center;
padding: 40px 20px;
}

.fehler-meldung {
background: linear-gradient(135deg, #ffe6e6, #ffeaea);
color: #d32f2f;
padding: 24px;
border-radius: 12px;
border: 1px solid #ffcdd2;
font-weight: 500;
max-width: 500px;
margin: 0 auto;
}

.loading-indicator {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
}

.spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #d6008f;
border-radius: 50%;
animation: spin 1s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

/* ================================================================ */
/* TEASER-ELEMENTE */
/* ================================================================ */
.bildteaser150Jahre {
max-width: 100%;
width: 100%;
height: auto;
}

.row2 .colTeaser {
position: relative;
overflow: inherit;
margin-bottom: 100px;
}

.row2 .colTeaser img {
display: block;
width: 100%;
height: auto;
}

.row2 .colTeaser h2 {
color: #ffffff !important;
text-transform: uppercase;
box-sizing: border-box;
font-size: 1.6em;
margin-top: -200px;
text-shadow: 2px 2px 2px #000;
}

.row2 .colTeaser .description {
color: #ffffff !important;
box-sizing: border-box;
font-size: 1.5em;
}

.row2 .colTeaser .bildunterschrift {
color: #ffffff !important;
box-sizing: border-box;
text-shadow: 2px 2px 2px #000;
}

.row2 .colTeaser h2,
.row2 .colTeaser .description,
.row2 .colTeaser .bildunterschrift {
position: relative;
padding-left: 40px;
text-align: left;
}

.bildteaser150Jahre {
max-width: 100%;
width: 100%;
height: auto;
}

.row2 .element.teaser.bildteaser150Jahre {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
gap: 20px;
align-items: stretch;
}

.row2 .element.teaser.bildteaser150Jahre .cols {
flex: 1;
min-width: 300px;
list-style: none;
display: flex;
flex-direction: column;
margin-left: 0;
}

.row2 .colTeaser {
position: relative;
overflow: inherit;
margin-bottom: 100px;

display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
}

.row2 .colTeaser img {
display: block;
width: 100%;
height: auto;
flex-shrink: 0;
}

.row2 .colTeaser h2 {
color: #ffffff !important;
text-transform: uppercase;
box-sizing: border-box;
font-size: 1.6em;
margin-top: -200px;
position: relative;
padding-left: 40px;
text-align: left;
margin-bottom: 10px;
}

.row2 .colTeaser .description {
color: #ffffff !important;
box-sizing: border-box;
font-size: 1.5em;
position: relative;
padding-left: 40px;
text-align: left;

flex: 1;

/* Optional: Vertikale Zentrierung des Textes */
display: flex;
align-items: center;
}

.row2 .colTeaser .bildunterschrift {
color: #ffffff !important;
box-sizing: border-box;
position: relative;
padding-left: 40px;
text-align: left;

margin-top: auto;
margin-bottom: 0;
}

.row2 .clear {
display: none;
}

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

/* Large Desktop */
@media (min-width: 1245px) {
.container150Jahre {
margin-top: -20.1% !important;
}
}

/* Medium Desktop */
@media (min-width: 993px) and (max-width: 1244px) {
.container150Jahre {
margin-top: -21.1% !important;
}

.logo a img {
height: auto;
width: 100px;
}

.row2 .colTeaser h2 {
font-size: 1.4em;
margin-top: -250px;
}

.row2 .colTeaser .description {
font-size: 1.2em;
}
}

/* Tablet */
@media (max-width: 992px) {
#content {
margin-top: 0;
}

#smartnav #shownav {
font-size: 2em;
}

#smartnav {
padding-top: 10px;
right: 20px;
}

#nav_small {
padding: 150px 25px;
width: 100%;
}

.logo {
position: absolute;
z-index: 300;
top: 10px;
left: 25px;
}

.row2 .colTeaser {
position: relative;
overflow: inherit;
margin-bottom: 20px;
}

.row2 {
margin-bottom: 100px;
}
}

/* Mobile and Tablet */
@media (min-width: 100px) and (max-width: 992px) {
#smartnav {
right: 20px;
}

#all {
width: 100% !important;
max-width: 100% !important;
}

.logo a img {
width: 70px;
height: auto;
}

.text,
.ueberschrift_themenseite {
padding: 0 10px;
}

.container150Jahre {
margin-top: -21.5% !important;
}

li.cols {
width: 100% !important;
}

.row2 .colTeaser {
width: 100%;
}

.row2 .colTeaser h2,
.row2 .colTeaser .description,
.row2 .colTeaser .bildunterschrift {
padding-left: 20px !important;
font-size: 1.2em !important;
}
}

/* Bento Grid Tablet */
@media screen and (max-width: 1024px) {
.bentogrid {
grid-template-columns: repeat(4, 1fr);
}

.bentogrid [data-bento="1x1"] { grid-column: span 2; grid-row: span 1; }
.bentogrid [data-bento="2x1"] { grid-column: span 2; grid-row: span 1; }
.bentogrid [data-bento="2x2"] { grid-column: span 2; grid-row: span 2; }
.bentogrid [data-bento="2x3"] { grid-column: span 2; grid-row: span 2; }
}

/* Timeline iPad */
@media (max-width: 1000px) {
.timeline::before {
left: 50%;
}

.video {
margin-right: 0;
width: 100%;
}

.timeline-event .year-label,
.timeline-event .timeline-content {
width: 50%;
}

.timeline-event .year-label {
text-align: right;
margin-right: 0;
padding-right: 1em;
}

.timeline-event .timeline-content {
text-align: left;
padding-left: 1em;
}

.timeline-event:nth-child(even) {
flex-direction: row-reverse;
}

.timeline-event:nth-child(even) .year-label {
text-align: left;
padding-left: 1em;
padding-right: 0;
}

.timeline-event:nth-child(even) .timeline-content {
text-align: right;
padding-right: 1em;
padding-left: 0;
}

.timeline-event::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 12px;
height: 12px;
background: #f39100;
border-radius: 50%;
z-index: 1;
}

.image-with-caption {
width: 100% !important;
}

.timeline-item.left .image-with-caption {
margin-left: 0px;
}
}

/* Timeline Medium */
@media screen and (min-width: 1000px) and (max-width: 1500px) {
.timeline-item.left .image-with-caption {
margin-left: auto !important;
}

.timeline-item.right .image-with-caption {
margin-right: calc(50% + 20px) !important;
}

.video iframe {
width: 100%;
}

.row2 .colTeaser h2 {
font-size: 1.4em;
margin-top: -250px;
}

.row2 .colTeaser .description {
font-size: 1.2em;
}
}

/* Timeline Small */
@media screen and (max-width: 900px) {
.timeline-item.left .image-with-caption {
margin-left: 0px;
width: 100%;
}
}

@media (min-width: 1024px) {
.timeline-item.left .image-with-caption {
margin-left: auto;
}
}


/* Carousel Medium */
@media (min-width: 820px) and (max-width: 1200px) {
.slide {
min-width: 33.333%;
}

.nav-arrow.prev,
.nav-arrow.next {
top: 35%;
transform: translateY(-50%);
}
}

/* Mobile */
@media (max-width: 768px) {
.socialMediastyle {
flex-direction: column;
align-items: center;
}

.socialMediastyle li {
padding: 0.5px;
margin-bottom: 0.5rem;
}

.socialMediastyle li:nth-child(3)::after {
content: "";
display: block;
width: 100%;
height: 15px;
background: linear-gradient(to right, transparent, #ddd 50%, transparent);
margin: 10px 0;
}

.bentogrid {
grid-template-columns: repeat(2, 1fr);
}

.bentogrid [data-bento="1x1"],
.bentogrid [data-bento="2x1"],
.bentogrid [data-bento="2x2"],
.bentogrid [data-bento="2x3"] {
grid-column: span 2;
grid-row: span 1;
}

.bentogrid > div:empty {
display: none;
}

.bentogrid > div:not(:has(*)):not([class*="text"]):not([class*="bild"]):not([class*="youtube"]) {
display: none;
}

.bentogrid {
grid-template-columns: 1fr !important;
grid-template-rows: auto !important;
grid-auto-rows: auto !important;
--bento-row-height: auto !important;
}

.bentogrid > div {
grid-area: auto !important;
grid-column: 1 !important;
grid-row: auto !important;
}

.bentogrid > div {
min-height: 200px;
}

.bentogrid .youtube-container {
min-height: 250px;
}

.bentogrid .text {
min-height: 150px;
}

.bentogrid [data-bento] .bottom .title {
font-size: 1.5rem;
}

.bentogrid [data-bento] .bottom .image-description,
.bentogrid [data-bento] .bottom .title-description {
font-size: 0.8rem;
}
/* * * * * * * * * * * * * * * * * * * * * * */
/* Veranstaltungskalender / Scoop */
/* * * * * * * * * * * * * * * * * * * * * * */
.veranstaltungen-section, .news-section {
padding: 15px;
}

.slide {
min-width: 50%;
padding: 18px;
}

.carousel-title {
font-size: 2em;
margin-bottom: 30px;
}

.slide-title, .slide-title-vak {
font-size: 16px;
}

.nav-arrow {
width: 42px;
height: 42px;
font-size: 18px;
}

.nav-arrow.prev {
left: 10px;
top: 7rem;
}

.nav-arrow.next {
right: 10px;
top: 7rem;
}

.termine-grid, .news-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 18px;
}

.pagination-number {
font-size: 14px;
padding: 6px 10px;
}

.pagination {
flex-wrap: wrap;
justify-content: center;
gap: 8px;
padding: 0 10px;
line-height: 1.2;
}

.pagination-number {
font-size: 14px;
padding: 6px 10px;
min-width: 36px;
margin: 2px;
flex-shrink: 0;
}

.timeline-element {
width: 100% !important;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 30px;
text-align: center;
}

.timeline-item {
width: 100% !important;
margin: 30px 0;
display: flex;
flex-direction: column;
align-items: center;
}

.timeline-item.left,
.timeline-item.right {
width: 100% !important;
margin: 30px 0;
display: flex;
flex-direction: column;
align-items: center;
}

.year-label {
position: relative !important;
left: auto !important;
transform: none !important;
text-align: center !important;
margin: 0 0 10px 0 !important;
font-size: 2rem;
font-weight: 600;
color: black;
padding: 0;
width: 100%;
background: white;
margin-bottom: 10px !important;
}

.dot {
position: relative !important;
left: auto !important;
transform: none !important;
margin: 10px auto 20px auto !important;
display: block;
}

.timeline-item.left .timeline-content,
.timeline-item.right .timeline-content {
width: 100% !important;
max-width: 90%;
margin: 0 auto !important;
text-align: center !important;
position: relative;
top: auto;
padding: 15px;
box-sizing: border-box;
}

.timeline-content {
width: 100% !important;
max-width: 90%;
margin: 0 auto !important;
text-align: center !important;
padding: 15px;
}

.timeline-content p {
font-size: 1.2rem !important;
color: #111 !important;
line-height: 1.4 !important;
margin: 0 !important;
background: rgb(241 237 237 / 94%);
padding: 0.7em 1em;
border-radius: 8px;
box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
text-align: center !important;
}

.timeline-item.left .image-with-caption,
.timeline-item.right .image-with-caption {
margin: 20px auto 0 auto !important;
width: 100% !important;
max-width: 90% !important;
display: block;
}

.image-with-caption {
position: relative;
display: block;
overflow: hidden;
margin: 20px auto 0 auto !important;
width: 100% !important;
max-width: 90% !important;
}

.image-with-caption img {
width: 100% !important;
height: auto;
display: block;
margin: 0 auto;
}
.image-with-caption figcaption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0.5em 0.8em;
background: rgba(0,0,0,0.6);
color: #fff;
font-size: 0.8rem;
font-style: italic;
text-align: center !important;
box-sizing: border-box;
}

.video {
height: 300px;
margin: 20px auto;
width: 100%;
max-width: 90%;
}

.video iframe {
height: 100%;
width: 100%;
border-radius: 8px;
}

.timeline-nav {
text-align: center;
margin-bottom: 5rem;
}

.timeline-nav a {
font-size: 1.6rem;
margin: 0 5px;
display: inline-block;
}

.timeline-Headline {
font-size: 2.5rem;
margin: 5rem 0 1rem;
text-align: center;
}
}

/* Small Mobile */
@media (max-width: 480px) {
.bentogrid {
grid-template-columns: 1fr;
}

.bentogrid [data-bento="1x1"],
.bentogrid [data-bento="2x1"],
.bentogrid [data-bento="2x2"],
.bentogrid [data-bento="2x3"] {
grid-column: span 1;
grid-row: span 1;
}

.slide {
min-width: 100%;
padding: 16px;
}

.carousel-title {
font-size: 2em;
}

.nav-arrow {
width: 40px;
height: 40px;
font-size: 16px;
}

.termine-grid, .news-grid {
grid-template-columns: 1fr;
gap: 16px;
}

.termin-content, .news-content {
padding: 16px;
}

.slide-image,
.termin-image, .news-image {
height: 180px;
}

.pagination {
flex-wrap: wrap;
justify-content: center;
gap: 6px;
padding: 0 5px;
max-width: 100%;
line-height: 1.3;
}

.pagination-number {
font-size: 12px;
padding: 5px 8px;
min-width: 32px;
margin: 3px 2px;
flex-shrink: 0;
white-space: nowrap;
}

.rowBottem {
margin-bottom: -1px;
}
}

@media (min-width: 579px) {
.row2 .colTeaser {
margin-bottom: 100px;
}
}

/* Very Small Mobile */
@media (max-width: 360px) {
.pagination {
gap: 4px;
padding: 0;
}

.pagination-number {
font-size: 11px;
padding: 4px 6px;
min-width: 28px;
margin: 2px 1px;
}
}

/* Extremely Small Mobile */
@media (max-width: 320px) {
.pagination {
gap: 2px;
}

.pagination-number {
font-size: 11px;
padding: 4px 6px;
min-width: 28px;
}

.pagination-number:not(.active):not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(9)) {
display: none;
}
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.carousel,
.slide-image img,
.termin-card,
.news-card,
.nav-arrow {
transition: none;
}
}

/* Print Styles */
@media print {
.nav-arrow,
.pagination {
display: none;
}

.carousel {
flex-wrap: wrap;
}

.slide {
min-width: 50%;
}
}




/* GEWINNSPIEL*/
/* ================================================================ */
/* CSS-VARIABLEN */
/* ================================================================ */
:root {
--orange: #f29100;
--magenta: #e5007c;
--blau: #1b4fab;
--gruen: #75b727;
}

/* ================================================================ */
/* ALLGEMEINE STYLES */
/* ================================================================ */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
line-height: 1.4;
background: url("/images/150Jahre/wappenelemente-bg.png");
background-repeat: repeat;
background-size: cover;
font-color: #4f4f4f;
font-size: 1.2em;
}

img {
border: 0;
padding: 0;
}

/* ================================================================ */
/* LAYOUT-CONTAINER */
/* ================================================================ */
#all {
width: 100% !important;
}

#content {
background: transparent;
margin-top: -150px;
padding-left: 0 !important;
padding-right: 0 !important;
padding: 0px 0px 18px 0px !important;
}

.container150Jahre {
max-width: 100%;
float: none;
margin: 0;
width: 100%;
justify-content: center;
align-items: center;
padding-left: 0;
padding-right: 0;
}

/* ================================================================ */
/* TYPOGRAFIE */
/* ================================================================ */
h2 {
color: #e5007c !important;
border-bottom: none !important;
font-weight: 800 !important;
}

a, a:hover, a:visited {
color: #e5007c;
}

.ueberschrift_themenseite div {
font-size: .85em;
margin-bottom: 20px;
}

/* ================================================================ */
/* LOGO */
/* ================================================================ */
.logo {
position: absolute;
z-index: 300;
top: 40px;
left: 25px;
}

.logo img {
display: block;
width: 17%;
height: auto;
margin-top: 5%;
}

.logo a img {
height: 122px;
width: 200px;
}

/* ================================================================ */
/* NAVIGATION */
/* ================================================================ */
#smartnav {
position: fixed;
background: none;
z-index: 250;
padding: 40px 25px;
top: 0px;
right: 50px;
left: unset;
width: fit-content;
}

#smartnav #shownav {
font-size: 4em;
background: #1b4fab;
border-radius: 60px;
padding: 15px;
}

#smartnav, #smartnavpush {
display: inline !important;
}

#smartnav img.noprint {
display: none;
}

#header {
position: fixed;
width: 100%;
top: 0;
z-index: 200;
}

#header ul {
list-style: none;
}

#header ul li {
border-top: 1px solid #cecece;
}

#header ul li a {
color: #fff;
font-family: "Open Sans",Verdana,Arial,Helvetica,sans-serif;
display: block;
padding: 8px 15px;
}

#nav_small {
background: #1b4fab;
color: #fff;
padding: 150px 20px;
position: fixed;
top: 0;
right: 0;
width: 25%;
height: 100vh;
}

#header .mehr {
display: none;
}

/* ================================================================ */
/* ROWS UND SPALTEN */
/* ================================================================ */
.rowTop {
max-width: 100%;
width: 100%;
height: auto;
position: relative;
z-index: 200;
pointer-events: none;
}

.rowTop img {
max-width: 100%;
width: 100%;
}

.row1 .row2 .row3 .rowBottem .col1 .col2 .col3 {
border: none;
border: 0;
}

.row1 {
position: relative;
z-index: 200;
margin-bottom: -300px;
border: none;
}

.row1 img {
display: block;
width: 100%;
}

.row2 {
display: flex;
position: relative;
padding: 0;
margin-bottom: 1.5%;
}

.row2 .col {
flex: 1;
padding: 0px;
}

.row2 .col img {
width: 100%;
height: auto;
display: block;
}

.row3 {
margin: 20px 10px;
text-align: center;
background-image: "Ablage/wappenelemente-bg.png";
background-repeat: repeat-y;
}

.row3 img {
max-width: 100%;
height: auto;
display: inline-block;
}

.rowBottem {
position: relative;
z-index: 100;
margin-top: -100px;
border: none;
}

.rowBottem img {
display: block;
width: 100%;
height: auto;
}

#spalte_links {
text-align: center;
}

/* ================================================================ */
/* PARALLAX-HINTERGRÜNDE */
/* ================================================================ */
#bg-1 {
width: 100%;
height: 65vh;
background: url('/images/150Jahre/bg-fix-hsh.jpg') top center;
background-position-x: center;
background-position-y: top;
background-attachment: scroll;
background-attachment: fixed;
background-size: auto;
background-size: cover;
position: relative;
}

#bg-2 {
width: 100%;
height: 65vh;
background: url('/images/150Jahre/bg-fix-hauptbahnhof.jpg') top center;
background-position-x: center;
background-position-y: top;
background-attachment: scroll;
background-attachment: fixed;
background-size: auto;
background-size: cover;
position: relative;
}

#bg-3 {
width: 100%;
height: 65vh;
background: url('/images/bg-fix-bild3.jpg') top center;
background-position-x: center;
background-position-y: top;
background-attachment: scroll;
background-attachment: fixed;
background-size: auto;
background-size: cover;
position: relative;
}

.bg-fixed-image {
margin: 3vh 0;
border-bottom: 1.5vh solid var(--gruen);
margin: 15rem 0 15rem 0;
}

/* ================================================================ */
/* BACK TO TOP */
/* ================================================================ */
#backtotop {
background: #1b4fab;
opacity: .8 !important;
}

#backtotop:hover {
background: #1b4fab;
opacity: 1 !important;
}

/* ================================================================ */
/* CMS BUTTON */
/* ================================================================ */
.CmsButtonTop {
z-index: 999999;
position: absolute;
top: 10px;
right: 10px;
}

/* ================================================================ */
/* SOCIAL MEDIA */
/* ================================================================ */
.socialMediastyle {
display: flex;
justify-content: center;
}

/* ================================================================ */
/* FOOTER */
/* ================================================================ */
#footer {
background: #00479a;
margin-left: auto;
margin-right: auto;
height: 15em;
z-index: 100;
}

#footer .logo {
position: relative;
float: left;
display: inline-block;
top: 0;
left: 0;
}

#footer img {
width: 150px;
height: auto !important;
}

#footer .text {
display: inline-block;
color: #fff;
padding: 0px;
}

#sizeselect a {
background: none;
}

#sizeselect a.current {
background: #75b727;
}

#sizeselect a:hover, #sizeselect a:focus, #sizeselect a:active {
background: #75b727;
}

#sizeselect li {
border: 1px solid #fff;
}

/* ================================================================ */
/* CONSENT MANAGER */
/* ================================================================ */
#consentManager:hover, #consentManager:hover {
background: #1b4fab;
}

#consentManager {
background: #1b4fab;
}

/* ================================================================ */
/* TIMELINE-ELEMENT */
/* ================================================================ */
.timeline-element {
margin-top: 10rem;
margin-bottom: 10rem;
}

.timeline-Headline {
text-align: center;
color: #f39100;
margin: 10rem 0 0.2em;
font-size: 3rem;
font-weight: 800;
position: relative;
z-index: 6000;
transition: color 0.3s ease;
}

.timeline-nav {
text-align: center;
margin-bottom: 10rem;
}

.timeline-nav a {
position: relative;
display: inline-block;
margin: 0 10px;
color: #333;
font-weight: bold;
text-decoration: none !important;
padding-bottom: 4px;
font-size: 2rem;
color: black;
margin-left: 1rem;
}

.timeline-nav a::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: transparent;
transition: background 0.3s;
}

.timeline-nav a.active::after {
background: var(--underline-color) !important;
}

.timeline-section {
display: none;
}

.timeline-section.active {
display: block;
}

.timeline-wrapper {
position: relative;
}

.timeline-container {
position: relative;
margin: 40px 0;
}

.timeline-container::before {
content: '';
position: absolute;
top: 0; bottom: 0;
left: 50%;
width: 2px;
background: #ccc;
transform: translateX(-50%);
z-index: 1;
}

.timeline-item {
position: relative;
margin: 40px 0;
width: 100%;
}

.timeline-content {
position: relative;
padding: 10px 15px;
z-index: 2;
}
.timeline-item.left .image-with-caption .vertical-caption {
left: auto !important;
right: 0 !important;
text-align: right !important;
}
.timeline-content p {
margin-bottom: 4rem;
margin-top: -18px;
font-size: 1.4rem;
color: black;
margin-left: 4rem;
margin-right: -14px;
}

.timeline-item.right .timeline-content {
margin-left: 3rem;
}

.timeline-item.left.timeline-content {
margin-left: 3rem;
}

.year-label {
position: absolute;
top: 0;
font-weight: bold;
color: #333;
z-index: 2;
font-size: 2rem;
font-weight: 600;
color: black;
margin-top: -40px;
}

.dot {
position: absolute;
left: 50%;
width: 12px;
height: 12px;
background: #f39100;
border-radius: 50%;
transform: translateX(-33%);
scale: 1.5;
z-index: 3;
transition: background 0.3s;
}

/* Timeline-Farben */
.timeline-section.orange .dot { background: #f39100 !important; }
.timeline-section.pink .dot { background: #e5007d !important; }
.timeline-section.green .dot { background: #75b727 !important; }

.timeline-section.orange .timeline-content a {
color: #f39100 !important;
}
.timeline-section.pink .timeline-content a {
color: #e5007d !important;
}
.timeline-section.green .timeline-content a {
color: #75b727 !important;
}
.timeline-content a {
display: block;
}

.timeline-section.orange .timeline-content a:hover {
text-decoration: underline #f39100;
}
.timeline-section.pink .timeline-content a:hover {
text-decoration: underline #e5007d;
}
.timeline-section.green .timeline-content a:hover {
text-decoration: underline #75b727;
}

.timeline-Headline.orange { color: #f39100; }
.timeline-Headline.pink { color: #e5007d; }
.timeline-Headline.green { color: #75b727; }

.timeline-item .timeline-content {
width: 45%;
padding: 10px 15px;
position: relative;
}

.timeline-item .timeline-content {
top: 0;
width: 45%;
padding: 10px 15px;
}

.timeline-item.right .timeline-content {
margin-left: calc(50% + 20px);
text-align: left;
}

.timeline-item.left .timeline-content {
margin-right: calc(50% + 10px);
text-align: right;
}

.timeline-item .dot {
left: 50%;
transform: translateX(-33%);
}

.timeline-item .year-label {
left: 49.2%;
transform: translateX(-33%);
text-align: center;
padding-bottom: 12px;
}

.year-label {
margin-top: -60px;
background: #fff;
padding-bottom: 3px;
}

/* Timeline-Bilder und Videos */
.image-with-caption {
position: relative;
display: block;
overflow: hidden;
margin-top: 2rem;
margin-right: -10px;
width: 90%;
}
.vertical-caption {
          width: 267px !important;
}
.timeline-item.left .image-with-caption {
margin-left: calc(50% + -340px);
}

.timeline-item.right .image-with-caption {
margin-right: calc(50% + 20px);
}

.image-with-caption img {
display: block;
width: 100%;
}

.image-with-caption.vertical-image {
display: flex;
align-items: center;
margin-top: 2rem;
}

.image-with-caption.vertical-image img {
width: auto;
max-width: 500px;
          float: left;
}

.image-with-caption.vertical-image figcaption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0.5em 1em;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 0.9em;
font-style: italic;
box-sizing: border-box;
text-align: left;
width: 100% !important;
max-width: 500px;
}


.timeline-item.left .image-with-caption img {
margin-left: auto;
}

.video {
height: 400px;
margin-left: 64px;
margin-right: 64px;
}

.video iframe {
height: 70%;
width: 70%;
}
.timeline-item.right .image-with-caption {
margin-left: 60px
}

.image-with-caption figcaption {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 0.5em 1em;
background: rgba(0,0,0,0.6);
color: #fff;
font-size: 0.9em;
font-style: italic;
box-sizing: border-box;
}

left.timeline-content figure {
margin: 0.5em 0;
text-align: right !important;
}

right.timeline-content figure {
margin: 0.5em 0;
text-align: left !important;
}

.timeline-content figcaption {
font-size: 0.9em;
color: #fff;
font-style: italic;
text-align: left;
}

/* ================================================================ */
/* BENTO-GRID / MEDIENGALERIE */
/* ================================================================ */
.color-orange {
background-color: var(--orange);
}

.color-magenta {
background-color: var(--magenta);
}

.color-blau {
background-color: var(--blau);
}

.color-gruen {
background-color: var(--gruen);
}

.bentogrid {
display: grid;
gap: 7px;
grid-template-columns: repeat(6, 1fr);
}

.bentogrid [data-bento] {
position: relative;
overflow: hidden;
min-height: 200px;
}

.youtube-container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.youtube-content {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}

.youtube-text {
position: absolute;
top: 0;
left: 0;
right: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, transparent 100%);
color: white;
padding: 15px;
z-index: 2;
font-size: 14px;
font-weight: 500;
opacity: 0;
transition: opacity 0.3s ease;
}

.youtube-container:hover .youtube-text {
opacity: 1;
}

.video-wrapper {
position: relative;
width: 100%;
height: 100%;
flex: 1;
}

.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
object-fit: cover;
}

.leer {
cursor: default !important;
}

.bentogrid [data-bento="1x1"] { grid-column: span 1; grid-row: span 1; }
.bentogrid [data-bento="2x1"] { grid-column: span 2; grid-row: span 1; }
.bentogrid [data-bento="2x2"] { grid-column: span 2; grid-row: span 2; }
.bentogrid [data-bento="2x3"] { grid-column: span 2; grid-row: span 3; }

.bentogrid [data-bento] > a {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: inherit;
text-decoration: none;
z-index: 1;
}

.bentogrid .bild[data-bento] {
background-image: url('/images/dummy.gif');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

.bentogrid .youtube[data-bento]::before {
content: "\25B6";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2rem;
color: rgba(255,255,255,0.85);
z-index: 2;
pointer-events: none;
text-shadow: 0 2px 8px rgba(0,0,0,0.5);
background-color: rgba(0,0,0,0.7);
padding: 2px 25px;
border-radius: 15px;
}

.bentogrid .text[data-bento] .bottom {
flex-direction: column;
padding-bottom: 15px;
line-height: 2rem;
}

.bentogrid [data-bento] .bottom {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 100%;
padding: 10px;
box-sizing: border-box;
z-index: 2;
overflow: visible;
min-height: 0;
color: #fff;
}

.bentogrid [data-bento] .bottom .title {
font-size: 2rem;
font-weight: bold;
margin: 0;
text-align: right;
white-space: normal;
overflow: visible;
text-overflow: unset;
}

.bentogrid [data-bento] .bottom .image-description {
font-size: 0.9rem;
text-align: left;
}

.bentogrid [data-bento] .bottom .title-description {
font-size: 0.9rem;
text-align: right;
}

/* ================================================================ */
/* VERANSTALTUNGEN / SCOOP */
/* ================================================================ */
.veranstaltungen-section, .news-section {
max-width: 1500px;
margin: 0 auto;
padding: 20px;
}

.slider-panel, .grid-panel {
margin-bottom: 60px;
}

.carousel-title {
font-size: 2em;
color: #d6008f;
font-weight: 700;
text-align: center;
margin-bottom: 40px;
letter-spacing: -0.5px;
text-transform: uppercase;
}

.carousel-container {
position: relative;
margin-bottom: 30px;
}

.carousel {
display: flex;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: transform;
}

.slide {
min-width: 25%;
padding: 24px;
display: flex;
flex-direction: column;
box-sizing: border-box;
}

.slide-image {
width: 100%;
height: 200px;
margin-bottom: 16px;
position: relative;
overflow: hidden;
background-color: #f8f9fa;
}

.slide-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}

.slide:hover .slide-image img {
transform: scale(1.05);
}

.bildrechte {
font-size: 12px;
color: #ffffff;
background-color: rgba(0, 0, 0, 0.7);
padding: 10px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: left;
line-height: 1.2;
opacity: 0.8;
z-index: 10;
}

.star-icon {
position: absolute;
top: 12px;
right: 12px;
width: 28px;
height: 28px;
background: linear-gradient(135deg, #ffc600, #ff9500);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
box-shadow: 0 2px 8px rgba(255, 198, 0, 0.4);
z-index: 2;
}

.slide-content {
flex: 1;
display: flex;
flex-direction: column;
}

.slide-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
line-height: 1.3;
flex-grow: 1;
}

.slide-title a {
color: #333;
text-decoration: none;
transition: color 0.2s ease;
}

.slide-title a:hover {
color: #000;
text-decoration: underline;
}

.slide-title-vak {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
line-height: 1.3;
flex-grow: 1;
}

.slide-title-vak a {
color: #d6008f;
text-decoration: none;
transition: color 0.2s ease;
font-size: 1.2em;
}

.slide-title-vak a:hover {
color: #b8006f;
text-decoration: underline;
}

.slide-date {
font-size: 14px;
color: #666;
margin: 0 0 4px 0;
font-weight: 500;
}

.slide-location {
font-size: 12px;
color: #888;
font-style: italic;
}

.nav-arrow {
position: absolute;
top: 41%;
transform: translateY(-50%);
width: 48px;
height: 48px;
background: #0b3e99;
border: none;
border-radius: 50%;
color: white;
font-size: 20px;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 10;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.nav-arrow:hover {
transform: translateY(-50%) scale(1.1);
background: linear-gradient(135deg, #d6008f, #b8006f);
box-shadow: 0 6px 16px rgba(214, 0, 143, 0.3);
}

.nav-arrow:active {
transform: translateY(-50%) scale(0.95);
}

.nav-arrow.prev {
left: 15px;
}

.nav-arrow.next {
right: 15px;
}
/* Anyslide */
.slider-nspaltig{
background: none;
}
.anythingSlider .panel{
padding: 1rem;
}

.carousel div{
width: 100%;
}
.arrow{
position: absolute;
top: 41%;
transform: translateY(-50%);
width: 48px;
height: 48px;
background: #0b3e99;
border: none;
border-radius: 50%;
color: white;
font-size: 20px;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 10;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.anythingSlider .arrow a{
color: white;
}

.arrow a:hover {
background: none !important;
}

.arrow:hover {
translateY: (-50%) scale(1.1) !important;
background: linear-gradient(135deg, #d6008f, #b8006f) !important;
box-shadow: 0 6px 16px rgba(214, 0, 143, 0.3) !important;
border-radius: 50%;
}
.back{
left:33px;
}.forward{
right: -50px;
}
.slider-nspaltig li a:hover, .slider-nspaltig li a:active, .slider-nspaltig li a:focus {
border-color: none !important;
text-decoration: none;
}

/*element.style {
}*/
.slider-nspaltig li a:hover, .slider-nspaltig li a:active, .slider-nspaltig li a:focus {
border-color: none !important;
text-decoration: underline;
}
.slider-nspaltig li a,
.slider-nspaltig li a:hover,
.slider-nspaltig li a:active,
.slider-nspaltig li a:focus {
border: none !important;
}
.slider-nspaltig .arrow a span{
left: 0;
}

/*.slider-nspaltig li a:hover, .slider-nspaltig li a:active, .slider-nspaltig li a:focus{
border-color: white !important;
}*/
.anythingSlider .thumbNav{
display: block;
}

.thumbNav {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 8px;
align-items: center;
}

.thumbNav li {
margin: 0;
padding: 0;
}

.thumbNav a {
width: 40px;
height: 40px;
background-color: #ffffff;
border: 1px solid #ddd;
border-radius: 6px;
text-decoration: none;
color: #999;
font-size: 14px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.thumbNav a:hover {
background-color: #f0f0f0;
border-color: #bbb;
}

.thumbNav a.cur,
.thumbNav a.panel1.cur {
background-color: #e91e63;
color: white;
border-color: #e91e63;
}
.thumbNav li{
margin-left: 3px;
margin-right: 3px;
}


.thumbNav .titel {
display: none;
}

/* Responsive Design */
@media (min-width: 768px) and (max-width: 1024px) {
.timeline-item.left .image-with-caption .vertical-caption {
left: unset !important;
/* oder */
left: initial !important;
}
}
@media (max-width: 600px) {
.thumbNav {
flex-wrap: wrap;
gap: 6px;
}

.thumbNav a {
width: 35px;
height: 35px;
font-size: 12px;
}
}

@media(max-width: 768px){

.arrow{
top: 28%;
}
.back{
left: 33px;
}
.forward{
right: -46px;
}
.anythingSlider .anythingControls{
}
}

@media(max-width:1200px){
.back{
left: 33px;
}
}

.thumbNav li {
margin: 5px !important;
padding: 0 !important;
}

.thumbNav li a {
width: 40px !important;
height: 40px !important;
text-decoration: none !important;
border-radius: 6px !important;
background-color: #f0f0f0 !important;
color: #999 !important;
border: 1px solid #ddd !important;
/*transition: all 0.3s ease !important;*/
}

.thumbNav li a span {
width: 100% !important;
height: 100% !important;
}

.thumbNav li a .nummer {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
font-size: 14px !important;
font-weight: 500 !important;
}

.thumbNav li a .titel {
display: none !important;
}

/* Hover-Effekt für normale Buttons */
/*.thumbNav li a:hover {
background-color: #e0e0e0 !important;
color: #fff !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}*/

/* Aktiver Zustand - Pink Design */
.thumbNav li a.cur,
.thumbNav li a .cur {
background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%) !important;
color: white !important;
border: none !important;
box-shadow: 0 4px 12px rgba(233, 30, 99, 0.3) !important;
transform: translateY(-2px) !important;
}




.thumbNav li a:hover {
background: linear-gradient(135deg, #c2185b 0%, #ad1457 100%) !important;
color: #fff !important;
/*transform: translateY(-1px) !important;
box-shadow: 0 6px 16px rgba(233, 30, 99, 0.4) !important;*/
}

/* Responsive Design */
@media (max-width: 600px) {
.thumbNav {
flex-wrap: wrap !important;
justify-content: center !important;
}

.thumbNav li a {
width: 35px !important;
height: 35px !important;
}

.thumbNav li a .nummer {
font-size: 12px !important;
}
}

/* Änderungen */

#topTermineCarousel .slide-content {
height: 100%;
width: 100%;
display: block;
}

.anythingSlider .thumbNav {
display: inline-block;
}

.anythingSlider .anythingControls {
overflow: visible !important;
position: absolute;
bottom: -135px;
min-width: 90%;
}

.carousel-container {
margin-bottom: 150px;
}

.anythingWindow,
.anythingSlider .panel {
min-height: 450px;
}

#topTermineCarousel .slide-date {
margin-left: 8px;
}

#topTermineCarousel .forward {
right: 33px;
}

@media (max-width: 767px) {
.anythingSlider .anythingControls {
bottom: -50px;
}
}

@media (max-width: 600px) {
#topTermineCarousel {
min-height: 350px;
}

.anythingSlider .anythingControls {
bottom: 0;
min-width: 100%;
}

.carousel-container {
margin-bottom: 200px;
}

.anythingWindow,
.anythingSlider .panel {
min-height: 0px;
padding: 0;
}

.anythingSlider {
min-width: 100%;
padding: 0 !important;
}

#topTermineCarousel .forward {
right: -20px;
}

#topTermineCarousel .back {
left: -20px;
}

}
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
margin-top: 24px;
padding: 0 20px;
}

.pagination-number {
color: #cccccc;
cursor: pointer;
font-size: 16px;
font-weight: 600;
padding: 8px 12px;
border-radius: 6px;
transition: all 0.2s ease;
user-select: none;
min-width: 20px;
text-align: center;
}

.pagination-number:hover {
color: #ffff;
background-color: #e91e63;
}

.pagination-number.active {
color: #ffffff;
background-color: #d6008f;
transform: scale(1.1);
}

.termine-grid, .news-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
margin-bottom: 40px;
}

.termin-card, .news-card {
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
overflow: hidden;
transition: all 0.3s ease;
border: 1px solid #f0f0f0;
position: relative;
}

.termin-card:hover, .news-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0,0,0,0.12);
border-color: #d6008f;
}

.termin-image, .news-image {
width: 100%;
height: 200px;
position: relative;
overflow: hidden;
background-color: #f8f9fa;
}

.termin-image img, .news-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}

.termin-card:hover .termin-image img, .news-card:hover .news-image img {
transform: scale(1.05);
}

.termin-content, .news-content {
padding: 20px;
}

.termin-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 12px;
line-height: 1.4;
}

.termin-title a, .news-title a {
color: #d6008f;
text-decoration: none;
transition: color 0.2s ease;
}

.termin-title a:hover, .news-title a:hover {
color: #b8006f;
text-decoration: underline;
}

.termin-date, .news-date {
font-size: 14px;
color: #666;
margin-bottom: 8px;
font-weight: 500;
}

.termin-location, .news-location {
font-size: 13px;
color: #888;
margin-bottom: 8px;
font-style: italic;
}

.termin-kategorie, .news-kategorie {
font-size: 11px;
color: #d6008f;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.5px;
}

.fehler-panel {
text-align: center;
padding: 40px 20px;
}

.fehler-meldung {
background: linear-gradient(135deg, #ffe6e6, #ffeaea);
color: #d32f2f;
padding: 24px;
border-radius: 12px;
border: 1px solid #ffcdd2;
font-weight: 500;
max-width: 500px;
margin: 0 auto;
}

.loading-indicator {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
}

.spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #d6008f;
border-radius: 50%;
animation: spin 1s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

/* ================================================================ */
/* TEASER-ELEMENTE */
/* ================================================================ */
.bildteaser150Jahre {
max-width: 100%;
width: 100%;
height: auto;
}

.row2 .colTeaser {
position: relative;
overflow: inherit;
margin-bottom: 100px;
}

.row2 .colTeaser img {
display: block;
width: 100%;
height: auto;
}

.row2 .colTeaser h2 {
color: #ffffff !important;
text-transform: uppercase;
box-sizing: border-box;
font-size: 1.6em;
margin-top: -200px;
}

.row2 .colTeaser .description {
color: #ffffff !important;
box-sizing: border-box;
font-size: 1.5em;
}

.row2 .colTeaser .bildunterschrift {
color: #ffffff !important;
box-sizing: border-box;
}

.row2 .colTeaser h2,
.row2 .colTeaser .description,
.row2 .colTeaser .bildunterschrift {
position: relative;
padding-left: 40px;
text-align: left;
}

.bildteaser150Jahre {
max-width: 100%;
width: 100%;
height: auto;
}

.row2 .element.teaser.bildteaser150Jahre {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
gap: 20px;
align-items: stretch;
}

.row2 .element.teaser.bildteaser150Jahre .cols {
flex: 1;
min-width: 300px;
list-style: none;
display: flex;
flex-direction: column;
}

.row2 .colTeaser {
position: relative;
overflow: inherit;
margin-bottom: 100px;

display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
}

.row2 .colTeaser img {
display: block;
width: 100%;
height: auto;
flex-shrink: 0;
}

.row2 .colTeaser h2 {
color: #ffffff !important;
text-transform: uppercase;
box-sizing: border-box;
font-size: 1.6em;
margin-top: -200px;
position: relative;
padding-left: 40px;
text-align: left;
margin-bottom: 10px;
}

.row2 .colTeaser .description {
color: #ffffff !important;
box-sizing: border-box;
font-size: 1.5em;
position: relative;
padding-left: 40px;
text-align: left;

flex: 1;

/* Optional: Vertikale Zentrierung des Textes */
display: flex;
align-items: center;
}

.row2 .colTeaser .bildunterschrift {
color: #ffffff !important;
box-sizing: border-box;
position: relative;
padding-left: 40px;
text-align: left;

margin-top: auto;
margin-bottom: 0;
}

.row2 .clear {
display: none;
}

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

/* Large Desktop */
@media (min-width: 1245px) {
.container150Jahre {
margin-top: -20.1% !important;
}
}

/* Medium Desktop */
@media (min-width: 993px) and (max-width: 1244px) {
.container150Jahre {
margin-top: -21.1% !important;
}

.logo a img {
height: auto;
width: 100px;
}

.row2 .colTeaser h2 {
font-size: 1.4em;
margin-top: -250px;
}

.row2 .colTeaser .description {
font-size: 1.2em;
}
}

/* Tablet */
@media (max-width: 992px) {
#content {
margin-top: 0;
}

#smartnav #shownav {
font-size: 2em;
}

#smartnav {
padding-top: 10px;
right: 20px;
}

#nav_small {
padding: 150px 25px;
width: 100%;
}

.logo {
position: absolute;
z-index: 300;
top: 10px;
left: 25px;
}

.row2 .colTeaser {
position: relative;
overflow: inherit;
margin-bottom: 10px;
}

.row2 {
margin-bottom: 100px;
}
}

/* Mobile and Tablet */
@media (min-width: 100px) and (max-width: 992px) {
#smartnav {
right: 20px;
}

#all {
width: 100% !important;
max-width: 100% !important;
}

.logo a img {
width: 70px;
height: auto;
}

.text,
.ueberschrift_themenseite {
padding: 0 10px;
}

.container150Jahre {
margin-top: -21.5% !important;
}

li.cols {
width: 100% !important;
}

.row2 .colTeaser {
width: 100%;
}

.row2 .colTeaser h2,
.row2 .colTeaser .description,
.row2 .colTeaser .bildunterschrift {
padding-left: 20px !important;
font-size: 1.2em !important;
}
}

/* Bento Grid Tablet */
@media screen and (max-width: 1024px) {
.bentogrid {
grid-template-columns: repeat(4, 1fr);
}

.bentogrid [data-bento="1x1"] { grid-column: span 2; grid-row: span 1; }
.bentogrid [data-bento="2x1"] { grid-column: span 2; grid-row: span 1; }
.bentogrid [data-bento="2x2"] { grid-column: span 2; grid-row: span 2; }
.bentogrid [data-bento="2x3"] { grid-column: span 2; grid-row: span 2; }
}

/* Timeline iPad */
@media (max-width: 1000px) {
.timeline::before {
left: 50%;
}

.video {
margin-right: 0;
width: 100%;
}

.timeline-event .year-label,
.timeline-event .timeline-content {
width: 50%;
}

.timeline-event .year-label {
text-align: right;
margin-right: 0;
padding-right: 1em;
}

.timeline-event .timeline-content {
text-align: left;
padding-left: 1em;
}

.timeline-event:nth-child(even) {
flex-direction: row-reverse;
}

.timeline-event:nth-child(even) .year-label {
text-align: left;
padding-left: 1em;
padding-right: 0;
}

.timeline-event:nth-child(even) .timeline-content {
text-align: right;
padding-right: 1em;
padding-left: 0;
}

.timeline-event::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 12px;
height: 12px;
background: #f39100;
border-radius: 50%;
z-index: 1;
}

.image-with-caption {
width: 100% !important;
}

.timeline-item.left .image-with-caption {
margin-left: 0px;
}
}

/* Timeline Medium */
@media screen and (min-width: 1000px) and (max-width: 1500px) {
.timeline-item.left .image-with-caption {
margin-left: auto !important;
}

.timeline-item.right .image-with-caption {
margin-right: calc(50% + 20px) !important;
}

.video iframe {
width: 100%;
}

.row2 .colTeaser h2 {
font-size: 1.4em;
margin-top: -250px;
}

.row2 .colTeaser .description {
font-size: 1.2em;
}
}

/* Timeline Small */
@media screen and (max-width: 900px) {
.timeline-item.left .image-with-caption {
margin-left: 0px;
width: 100%;
}
}

@media (min-width: 1024px) {
.timeline-item.left .image-with-caption {
margin-left: auto;
}
}


/* Carousel Medium */
@media (min-width: 820px) and (max-width: 1200px) {
.slide {
min-width: 33.333%;
}

.nav-arrow.prev,
.nav-arrow.next {
top: 35%;
transform: translateY(-50%);
}
}

/* Mobile */
@media (max-width: 768px) {
.socialMediastyle {
flex-direction: column;
align-items: center;
}

.socialMediastyle li {
padding: 0.5px;
margin-bottom: 0.5rem;
}

.socialMediastyle li:nth-child(3)::after {
content: "";
display: block;
width: 100%;
height: 15px;
background: linear-gradient(to right, transparent, #ddd 50%, transparent);
margin: 10px 0;
}

.bentogrid {
grid-template-columns: repeat(2, 1fr);
}

.bentogrid [data-bento="1x1"],
.bentogrid [data-bento="2x1"],
.bentogrid [data-bento="2x2"],
.bentogrid [data-bento="2x3"] {
grid-column: span 2;
grid-row: span 1;
}

.bentogrid > div:empty {
display: none;
}

.bentogrid > div:not(:has(*)):not([class*="text"]):not([class*="bild"]):not([class*="youtube"]) {
display: none;
}

.bentogrid {
grid-template-columns: 1fr !important;
grid-template-rows: auto !important;
grid-auto-rows: auto !important;
--bento-row-height: auto !important;
}

.bentogrid > div {
grid-area: auto !important;
grid-column: 1 !important;
grid-row: auto !important;
}

.bentogrid > div {
min-height: 200px;
}

.bentogrid .youtube-container {
min-height: 250px;
}

.bentogrid .text {
min-height: 150px;
}

.bentogrid [data-bento] .bottom .title {
font-size: 1.5rem;
}

.bentogrid [data-bento] .bottom .image-description,
.bentogrid [data-bento] .bottom .title-description {
font-size: 0.8rem;
}
/* * * * * * * * * * * * * * * * * * * * * * */
/* Veranstaltungskalender / Scoop */
/* * * * * * * * * * * * * * * * * * * * * * */
.veranstaltungen-section, .news-section {
padding: 15px;
}

.slide {
min-width: 50%;
padding: 18px;
}

.carousel-title {
font-size: 2em;
margin-bottom: 30px;
}

.slide-title, .slide-title-vak {
font-size: 16px;
}

.nav-arrow {
width: 42px;
height: 42px;
font-size: 18px;
}

.nav-arrow.prev {
left: 10px;
top: 7rem;
}

.nav-arrow.next {
right: 10px;
top: 7rem;
}

.termine-grid, .news-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 18px;
}

.pagination-number {
font-size: 14px;
padding: 6px 10px;
}

.pagination {
flex-wrap: wrap;
justify-content: center;
gap: 8px;
padding: 0 10px;
line-height: 1.2;
}

.pagination-number {
font-size: 14px;
padding: 6px 10px;
min-width: 36px;
margin: 2px;
flex-shrink: 0;
}

.timeline-element {
width: 100% !important;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 30px;
text-align: center;
}

.timeline-item {
width: 100% !important;
margin: 30px 0;
display: flex;
flex-direction: column;
align-items: center;
}

.timeline-item.left,
.timeline-item.right {
width: 100% !important;
margin: 30px 0;
display: flex;
flex-direction: column;
align-items: center;
}

.year-label {
position: relative !important;
left: auto !important;
transform: none !important;
text-align: center !important;
margin: 0 0 10px 0 !important;
font-size: 2rem;
font-weight: 600;
color: black;
padding: 0;
width: 100%;
background: white;
margin-bottom: 10px !important;
}

.dot {
position: relative !important;
left: auto !important;
transform: none !important;
margin: 10px auto 20px auto !important;
display: block;
}

.timeline-item.left .timeline-content,
.timeline-item.right .timeline-content {
width: 100% !important;
max-width: 90%;
margin: 0 auto !important;
text-align: center !important;
position: relative;
top: auto;
padding: 15px;
box-sizing: border-box;
}

.timeline-content {
width: 100% !important;
max-width: 90%;
margin: 0 auto !important;
text-align: center !important;
padding: 15px;
}

.timeline-content p {
font-size: 1.2rem !important;
color: #111 !important;
line-height: 1.4 !important;
margin: 0 !important;
background: rgb(241 237 237 / 94%);
padding: 0.7em 1em;
border-radius: 8px;
box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
text-align: center !important;
}

.timeline-item.left .image-with-caption,
.timeline-item.right .image-with-caption {
margin: 20px auto 0 auto !important;
width: 100% !important;
max-width: 90% !important;
display: block;
}

.image-with-caption {
position: relative;
display: block;
overflow: hidden;
margin: 20px auto 0 auto !important;
width: 100% !important;
max-width: 90% !important;
}

.image-with-caption img {
width: 100% !important;
height: auto;
display: block;
margin: 0 auto;
}
.image-with-caption figcaption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0.5em 0.8em;
background: rgba(0,0,0,0.6);
color: #fff;
font-size: 0.8rem;
font-style: italic;
text-align: center !important;
box-sizing: border-box;
}

.video {
height: 300px;
margin: 20px auto;
width: 100%;
max-width: 90%;
}

.video iframe {
height: 100%;
width: 100%;
border-radius: 8px;
}

.timeline-nav {
text-align: center;
margin-bottom: 5rem;
}

.timeline-nav a {
font-size: 1.6rem;
margin: 0 5px;
display: inline-block;
}

.timeline-Headline {
font-size: 2.5rem;
margin: 5rem 0 1rem;
text-align: center;
}
}

/* Small Mobile */
@media (max-width: 480px) {
.bentogrid {
grid-template-columns: 1fr;
}

.bentogrid [data-bento="1x1"],
.bentogrid [data-bento="2x1"],
.bentogrid [data-bento="2x2"],
.bentogrid [data-bento="2x3"] {
grid-column: span 1;
grid-row: span 1;
}

.slide {
min-width: 100%;
padding: 16px;
}

.carousel-title {
font-size: 2em;
}

.nav-arrow {
width: 40px;
height: 40px;
font-size: 16px;
}

.termine-grid, .news-grid {
grid-template-columns: 1fr;
gap: 16px;
}

.termin-content, .news-content {
padding: 16px;
}

.slide-image,
.termin-image, .news-image {
height: 180px;
}

.pagination {
flex-wrap: wrap;
justify-content: center;
gap: 6px;
padding: 0 5px;
max-width: 100%;
line-height: 1.3;
}

.pagination-number {
font-size: 12px;
padding: 5px 8px;
min-width: 32px;
margin: 3px 2px;
flex-shrink: 0;
white-space: nowrap;
}

.rowBottem {
margin-bottom: -1px;
}
}

@media (min-width: 579px) {
.row2 .colTeaser {
margin-bottom: 100px;
}
}

/* Very Small Mobile */
@media (max-width: 360px) {
.pagination {
gap: 4px;
padding: 0;
}

.pagination-number {
font-size: 11px;
padding: 4px 6px;
min-width: 28px;
margin: 2px 1px;
}
}

/* Extremely Small Mobile */
@media (max-width: 320px) {
.pagination {
gap: 2px;
}

.pagination-number {
font-size: 11px;
padding: 4px 6px;
min-width: 28px;
}

.pagination-number:not(.active):not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(9)) {
display: none;
}
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.carousel,
.slide-image img,
.termin-card,
.news-card,
.nav-arrow {
transition: none;
}
}

/* Print Styles */
@media print {
.nav-arrow,
.pagination {
display: none;
}

.carousel {
flex-wrap: wrap;
}

.slide {
min-width: 50%;
}
}

/* ================================================================ */
/* GEWINNSPIEL FORMULAR FIXES */
/* ================================================================ */

/* Container und Grundlayout */
#spalte_links .form {
clear: both;
padding: 30px !important;
border-radius: 12px;
max-width: 1200px;
margin: 0 auto;
margin-top: 50px;
background: #0000;
}

/* Überschrift in 150 Jahre Farben */
.form h3 {
color: #e5007c !important;
border-bottom: none !important;
font-weight: 800 !important;
text-align: center;
margin-bottom: 30px !important;
font-size: 2.2em !important;
}

/* Grundlegendes Padding für alle Zeilen */
.form .zeile {
padding: 15px 0 !important;
margin-top: 0 !important;
}

.form .zeile + .zeile {
margin-top: 20px !important;
padding-top: 15px !important;
}

/* Input Felder Styling */
.form input[type="text"],
.form input[type="email"],
.form input[type="date"] {
background: #fff !important;
border: 2px solid #ddd !important;
padding: 12px 15px !important;
border-radius: 8px !important;
font-size: 1em !important;
transition: all 0.3s ease !important;
}

.form input[type="text"]:focus,
.form input[type="email"]:focus,
.form input[type="date"]:focus {
border-color: #e5007c !important;
box-shadow: 0 0 0 3px rgba(229, 0, 124, 0.1) !important;
outline: none !important;
}

/* Labels */
.form label {
color: #333 !important;
font-weight: 600 !important;
margin-bottom: 8px !important;
display: block !important;
}

.form label.pflichtfeld:after {
content: " *" !important;
color: #e5007c !important;
font-weight: bold !important;
}

/* Spalten Layout Fix */
.form .zeile .halb {
float: left;
width: 48% !important;
padding-right: 15px !important;
}

.form .zeile .halb + .halb {
margin-left: 4% !important;
padding-right: 0 !important;
padding-left: 0 !important;
}

.form .zeile .einviertel {
float: left;
width: 23.5% !important;
padding-right: 15px !important;
}

/* Anrede Buttons */
.form .geButtonset.geButtonset-horizontal {
display: flex !important;
gap: 10px !important;
justify-content: center !important;
padding: 10px 0 !important;
}

.form .geButtonset.geButtonset-horizontal li {
flex: none !important;
margin-right: 10px;
}

.form .geButtonset input[type='radio'] {
position: absolute !important;
left: -10000px !important;
top: auto !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}

.form .geButtonset label {
background: #fff !important;
border: 2px solid #ddd !important;
padding: 10px 20px !important;
border-radius: 8px !important;
cursor: pointer !important;
display: inline-block !important;
font-weight: 500 !important;
transition: all 0.3s ease !important;
margin-bottom: 0 !important;
          width: 100% !important;
}

.form .geButtonset input[type='radio']:checked + label {
background: #e5007c !important;
border-color: #e5007c !important;
color: #fff !important;
}

/* Fragen Sektion */
.form fieldset {
border: none !important;
border-top: 2px solid #e5007c !important;
margin: 30px 0 20px 0 !important;
padding-top: 20px !important;
}

.form fieldset legend {
color: #e5007c !important;
font-weight: bold !important;
font-size: 1.2em !important;
padding: 0 15px !important;
background: rgba(255, 255, 255, 0.95) !important;
}

/* Fragen Labels */
.form .zeile > label.pflichtfeld {
color: #333 !important;
font-weight: 600 !important;
margin-bottom: 15px !important;
font-size: 1.1em !important;
}

/* Multiple Choice Antworten mit 150 Jahre Farben */
.form .geButtonset.geButtonset-horizontal ol {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
          justify-content: center;
flex-direction: column !important;
gap: 10px !important;
          width: 100%;
}

.form .geButtonset.geButtonset-horizontal ol li {
margin: 0 !important;
width: 100% !important;
}

.form .geButtonset.geButtonset-horizontal ol li label {
width: 100% !important;
text-align: left !important;
padding: 15px 20px !important;
background: #f8f9fa !important;
border: 2px solid #e9ecef !important;
border-radius: 8px !important;
display: block !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
}

/* Hover-Effekte mit wechselnden 150 Jahre Farben */
.form .geButtonset.geButtonset-horizontal ol li:nth-child(1) label:hover {
border-color: #f29100 !important;
background: rgba(242, 145, 0, 0.1) !important;
color: #f29100 !important;
}

.form .geButtonset.geButtonset-horizontal ol li:nth-child(2) label:hover {
border-color: #e5007c !important;
background: rgba(229, 0, 124, 0.1) !important;
color: #e5007c !important;
}

.form .geButtonset.geButtonset-horizontal ol li:nth-child(3) label:hover {
border-color: #75b727 !important;
background: rgba(117, 183, 39, 0.1) !important;
color: #75b727 !important;
}

/* Checked State */
.form .geButtonset.geButtonset-horizontal ol li input[type='radio']:checked + label {
background: #1b4fab !important;
border-color: #1b4fab !important;
color: #fff !important;
font-weight: 600 !important;
}

/* Teilnahmebedingungen */
.form .geButtonset.geButtonset-multiple {
padding: 20px 0 !important;
}

.form .geButtonset.geButtonset-multiple span {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}

.form .geButtonset.geButtonset-multiple input[type="checkbox"] {
position: relative !important;
left: auto !important;
width: 20px !important;
height: 20px !important;
margin: 0 !important;
          display: none !important;
}

.form .geButtonset.geButtonset-multiple label {
margin-bottom: 0 !important;
font-size: 1em !important;
cursor: pointer !important;
}

/* Captcha Bereich */
.form .captcha {
background: #f8f9fa !important;
border: 2px solid #e9ecef !important;
border-radius: 8px !important;
padding: 20px !important;
margin: 20px 0 !important;
}

.form .captcha p {
margin-bottom: 15px !important;
color: #666 !important;
}

.form .captcha button {
background: #1b4fab !important;
color: #fff !important;
border: none !important;
padding: 8px 16px !important;
border-radius: 4px !important;
margin-right: 10px !important;
cursor: pointer !important;
}

.form .captcha button:hover {
background: #164397 !important;
}

.form .captcha input[type="text"] {
width: 150px !important;
margin-top: 10px !important;
}

/* Submit Button */
.form .bttnzeile {
text-align: center !important;
margin: 30px 0 0 0 !important;
padding: 20px 0 !important;
}

.form .bttn {
background: linear-gradient(135deg, #e5007c, #c2004a) !important;
color: #fff !important;
border: none !important;
padding: 15px 40px !important;
font-size: 1.1em !important;
font-weight: 600 !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
}

.form .bttn:hover {
background: linear-gradient(135deg, #c2004a, #a0003a) !important;
transform: translateY(-2px) !important;
box-shadow: 0 8px 25px rgba(229, 0, 124, 0.3) !important;
}

/* Clearfix */
.form .clear {
clear: both !important;
height: 0 !important;
margin: 0 !important;
}

/* Error States */
.form .error {
border-color: #dc3545 !important;
}

.form .fehler {
color: #dc3545 !important;
background: rgba(220, 53, 69, 0.1) !important;
border: 1px solid #dc3545 !important;
padding: 10px !important;
border-radius: 4px !important;
margin: 10px 0 !important;
}

/* Responsive Design */
@media (max-width: 768px) {
#spalte_links .form {
padding: 20px !important;
margin: 10px !important;
}

.form .zeile .halb {
width: 100% !important;
margin-left: 0 !important;
padding-right: 0 !important;
margin-bottom: 15px !important;
}

.form .zeile .halb + .halb {
margin-left: 0 !important;
}

.form .zeile .einviertel {
width: 100% !important;
margin-bottom: 15px !important;
padding-right: 0 !important;
}

.form .geButtonset.geButtonset-horizontal {
flex-direction: column !important;
}

.form h3 {
font-size: 1.8em !important;
}
}

@media (max-width: 480px) {
.form .captcha {
padding: 15px !important;
}

.form .bttn {
width: 100% !important;
padding: 12px 20px !important;
}
}

/* Zusätzliche 150 Jahre Stilelemente */
.form::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #f29100 0%, #e5007c 50%, #75b727 100%);
border-radius: 8px 8px 0 0;
}

.form {
position: relative !important;
}