@charset "UTF-8";

/* --- File: ast-startseite-style --- */
.deine-button-klasse{
	text-align: center !important;
	background: linear-gradient(var(--orange2), var(--orange1)) !important;
	padding: 18px;
	color: var(--permaweiss) !important;
	width: 100%;
	display: inline-grid;
	margin-top: 10px;
}
.deine-button-klasse:hover{
	background: linear-gradient(var(--orange1), var(--orange2)) !important;
    color: var(--permaschwarz) !important;
}

.ausstattung-box ul{
	margin-top: 18px !important;
}

.ausstattung-box.erlebnisse-btn-wrapper {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ausstattung-breit:not(.erlebnisse-btn-wrapper):has(a.deine-button-klasse) {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ausstattung-breit:not(.erlebnisse-btn-wrapper) > div:last-of-type {
  margin-top: auto !important;
}

a.deine-button-klasse {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: justify;
}


/* --- File: anderles-floating-elements-style --- */
/* ==========================================================================
   Anderles Floating Elements Manager Stylesheet
   ========================================================================== */

/* 1. Weiche Animationen für beide Elemente */
#sidebuchen-menu,
#anderles-top-button {
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease, background 0.25s ease !important;
}

/* 2. Versteckter Zustand (Wenn der Header im Bild ist) */
#sidebuchen-menu.is-hidden-by-header {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(65%) translateX(10%) !important; 
}

#anderles-top-button.is-hidden-by-header {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(20px) !important; /* Rutscht sanft nach unten weg */
}

/* 3. Design & Positionierung Top-Button (Desktop) */
#anderles-top-button {
    position: fixed;
    bottom: 40px;
    right: calc((100vw - 1350px) / 2 + 15px);;
    z-index: 9999;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-color: var(--orange2, orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

#anderles-top-button img {
  width: 38px;
  height: auto;
  display: block;
  margin: auto;
}

#anderles-top-button:hover {
    transform: scale(1.08); /* Minimaler Zoom beim Drüberfahren */
}

@media (max-width: 1615px) {
    #anderles-top-button {
        bottom: 100px;

    }
}

@media (max-width: 1350px) {
    #anderles-top-button {
        right: 15px;

    }
}

@media (max-width: 750px) {
    #anderles-top-button {
        bottom: 0px;

    }
}

@media (max-width: 550px) {
    #anderles-top-button {
        bottom: 80px;
        right: calc((100vw - 50px) / 2) ;
    }
}

@media (min-width: 1920px) {
    #anderles-top-button {
        right: calc(((100vw - (1350 * 100vw) / 1920) / 2) + 15px) !important;
    }
}


/* --- File: anderles-impressum-style --- */
/* ==========================================================================
   Anderles Impressum & Abbildungsverzeichnis Stylesheet
   ========================================================================== */

.anderles-abbildungsverzeichnis {
    margin: 20px 0 30px 0;
}

.anderles-imgdir-section {
    margin-bottom: 22px;
    background: var(--hintergrund);
    padding: 14px 18px;
    border-left: none;
    border-radius: 0px;
	border: 1px solid var(--schwarz);
	
}

/* ==========================================================================
   Ausklapp-Pfeil (Custom Styling)
   ========================================================================== */

/* 1. Standard-Pfeil des Browsers restlos verstecken */
.anderles-imgdir-section summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    outline: none;
    list-style: none; /* Versteckt den Pfeil in Firefox/neuen Chromes */
}

.anderles-imgdir-section summary::-webkit-details-marker {
    display: none; /* Versteckt den Pfeil in Safari/alten Chromes */
}

/* 2. Unseren eigenen, orangefarbenen Pfeil bauen */
.anderles-imgdir-section summary::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    /* Malt ein perfektes CSS-Dreieck */
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid var(--orange2, orange);
    margin-right: 12px;
    /* Weiche Drehung beim Ausklappen */
    transition: transform 0.25s ease-in-out;
}

/* 3. Pfeil nach unten drehen, wenn das Akkordeon offen ist */
.anderles-imgdir-section[open] summary::before {
    transform: rotate(90deg);
}

/* ==========================================================================
   Typografie & Listen-Inhalte
   ========================================================================== */

.anderles-imgdir-section h4 {
    margin: 0;
    font-size: 1.08rem;
    color: var(--schwarz, inherit);
    display: inline-block;
    vertical-align: middle;
}

/* Liste innerhalb des Details-Containers mit Abstand nach oben */
.anderles-imgdir-list {
    list-style: none !important;
    margin: 16px 0 0 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.anderles-imgdir-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    font-size: 0.94rem;
    line-height: 1.45;
}

.anderles-imgdir-item:last-child {
    border-bottom: none;
}

.anderles-imgdir-thumb {
    width: 56px !important;
    height: 42px !important;
    object-fit: cover;
    flex-shrink: 0;

}

.anderles-imgdir-copy {
    display: inline-block;
    margin-left: 6px;
    font-weight: 700;
    color: var(--text, inherit);
}

.tabcontent h3 {
    margin-bottom: 24px;
}

.tabcontent p strong {
    display: inline-block;
    margin-top: 16px;
    margin-bottom: 8px;
}


/* --- File: anderles-bilder-zoom-style --- */
/* Anderles Bilder-Zoom Stylesheet */
.anderles-zoom-modal {
    display: none;
    position: fixed;
    z-index: 999999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0,0,0,0.9);
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.anderles-zoom-modal-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 85vw;
    max-height: 85vh;
    z-index: 1000000;
    position: relative;
}
.anderles-zoom-modal-img {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 4px;
}

.dark-theme .anderles-zoom-modal-wrapper img[src*="Raumplaene"]{
    filter: invert(0.9) !important;
    transition: filter 0.3s ease;
}

.anderles-zoom-modal-caption {
    margin-top: 15px;
    color: #ccc;
    font-size: 16px;
    text-align: center;
    line-height: 1.4;
    max-width: 800px;
}
#anderles-zoom-alt {
    margin-bottom: 4px;
}
#anderles-zoom-copy {
    font-size: 14px;
    font-weight: 600;
}
.anderles-zoom-modal-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    z-index: 1000001;
}
.anderles-zoom-modal-close:hover {
    color: #bbb;
}
/* Pfeile für die abschnittsweise Navigation */
.anderles-zoom-prev, 
.anderles-zoom-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 40px;
    transition: 0.3s ease;
    user-select: none;
    z-index: 1000002;
    text-decoration: none;
    background-color: rgba(0,0,0,0.2);
    border-radius: 3px;
}
.anderles-zoom-next { right: 10px; }
.anderles-zoom-prev { left: 10px; }
.anderles-zoom-prev:hover, 
.anderles-zoom-next:hover {
    background-color: rgba(255, 255, 255, 0.3);
}




/* --- File: anderles-lauftext-style --- */
/* ==========================================================================
   Anderles Infolauftext (Ticker) Stylesheet - Seamless Loop
   ========================================================================== */

#anderles-infolauftext {
    /* Flex Layout, damit nichts umbricht */
    display: flex;
    width: 100%;
    max-width: 1351.5px;
    margin: 0 auto;
    margin-top: 0.4cqi;
	margin-bottom: 0.0cqi;
    border: 2px solid var(--orange2);
    background: var(--permagreen2);
    color: var(--permaweiss);
    
    overflow: hidden;
    padding: 10px 0;
    box-sizing: border-box;
    white-space: nowrap;
    position: relative;
    container-type: inline-size;
}

#anderles-infolauftext:empty {
    display: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

/* ==========================================================================
   Animation & Nahtloser Übergang
   ========================================================================== */

/* Die Schiene (Track), die beide Textblöcke hält und als Ganzes animiert wird */
.anderles-marquee-track {
    display: flex;
    width: max-content;
    /* Dauer wird dynamisch vom JS gesetzt */
    animation: anderles-marquee-seamless linear infinite; 
}

/* Der eigentliche Textblock (wird vom JS 2x auf die Schiene gelegt) */
.anderles-marquee-content {
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.5px;
    box-sizing: border-box;
    /* Vertikale Zentrierung */
    display: flex;
    align-items: center;
}

/* 
 * Der Trick: Wir verschieben die Schiene exakt um die Hälfte (-50%). 
 * Da zwei identische Blöcke draufliegen, rutscht Block 2 genau auf die Startposition von Block 1!
 */
@keyframes anderles-marquee-seamless {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ==========================================================================
   Fallback für Rechts-nach-Links-Sprachen (Arabisch)
   ========================================================================== */
[dir="rtl"] .anderles-marquee-track {
    animation: anderles-marquee-seamless-rtl linear infinite;
}

@keyframes anderles-marquee-seamless-rtl {
    0% { transform: translateX(0); }
    100% { transform: translateX(50%); }
}

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

@media (min-width: 1920px) {
    #anderles-infolauftext {
        max-width: calc((1351.5 * 100vw) / 1920);
    }
}

@media (min-width: 501px) and (max-width: 900px) {
    #anderles-infolauftext {
        width: 99%;
        margin-top: 1cqi;
        font-size: 1rem;
    }
}

@media (max-width: 500px) {
    #anderles-infolauftext {
        width: 97.8cqi;
        margin-top: 1.1cqi;
        font-size: 0.9rem;
        padding: 8px 0;
    }
}


/* --- File: cmplz-general --- */
.cmplz-video.cmplz-iframe-styles{background-color:transparent}.cmplz-video.cmplz-hidden{visibility:hidden !important}.cmplz-blocked-content-notice{display:none}.cmplz-placeholder-parent{height:inherit}.cmplz-optin .cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-optin .cmplz-wp-video .cmplz-blocked-content-notice,.cmplz-optout .cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-optout .cmplz-wp-video .cmplz-blocked-content-notice{display:block}.cmplz-blocked-content-container,.cmplz-wp-video{animation-name:cmplz-fadein;animation-duration:600ms;background:#FFF;border:0;border-radius:3px;box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15);display:flex;justify-content:center;align-items:center;background-repeat:no-repeat !important;background-size:cover !important;height:inherit;position:relative}.cmplz-blocked-content-container.gmw-map-cover,.cmplz-wp-video.gmw-map-cover{max-height:100%;position:absolute}.cmplz-blocked-content-container.cmplz-video-placeholder,.cmplz-wp-video.cmplz-video-placeholder{padding-bottom:initial}.cmplz-blocked-content-container iframe,.cmplz-wp-video iframe{visibility:hidden;max-height:100%;border:0 !important}.cmplz-blocked-content-container .cmplz-custom-accept-btn:focus,.cmplz-wp-video .cmplz-custom-accept-btn:focus{border:1px dotted #cecece}.cmplz-blocked-content-container .cmplz-custom-accept-btn,.cmplz-wp-video .cmplz-custom-accept-btn{white-space:normal;text-transform:initial;cursor:pointer;position:absolute !important;width:100%;top:50%;left:50%;transform:translate(-50%,-50%);max-width:200px;font-size:14px;padding:10px;background-color:rgba(0,0,0,0.5);color:#fff;text-align:center;z-index:98;line-height:23px}.cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-wp-video .cmplz-blocked-content-notice{white-space:normal;text-transform:initial;position:absolute !important;width:100%;top:50%;left:50%;transform:translate(-50%,-50%);max-width:300px;font-size:14px;padding:10px;background-color:rgba(0,0,0,0.5);color:#fff;text-align:center;z-index:98;line-height:23px}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-links,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-links{display:block;margin-bottom:10px}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-links a,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-links a{color:#fff}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-blocked-content-notice-body,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-blocked-content-notice-body{display:block}.cmplz-blocked-content-container div div{display:none}.cmplz-wp-video .cmplz-placeholder-element{width:100%;height:inherit}@keyframes cmplz-fadein{from{opacity:0}to{opacity:1}}

/* --- File: anderles-style --- */
body {
    --green1: #139900;
	--permagreen1: #139900;
    --green2: #0d6800;
    --permagreen2: #0d6800;
    --orange1: #ffc201;
    --orange2: #C99901;
    --schwarz: #000000;
    --permaschwarz: #000000;
    --weiss: #ffffff;
    --permaweiss: #ffffff;
    --braun1: #c29257;
    --braun2: #8f693b;
    --text: #4A4A4A;
    --hintergrund: #e5e5e5;
    --kalt: #003aa7;
	--hx: var(--green2);
	--bubble: var(--green2);
    --permagrau: #4A4A4A;
	--img-personen: url("/wp-content/uploads/anderles/icons/personen.webp");
    --img-planner: url("/wp-content/uploads/anderles/icons/planner.webp");
    --img-haus: url("/wp-content/uploads/anderles/icons/haus.webp");
    --img-hund: url("/wp-content/uploads/anderles/icons/hund.webp");

}

.tempimg {
	background-image:url("/wp-content/uploads/anderles/Header/temp.webp");
	background-repeat: no-repeat;
}


.raumplan img {
    filter: invert(0);
}

nav.mobile_menu img{
    filter:invert(1);
}


body.dark-theme {
      --green2: #139900;
      --green1: #0d6800;
      --orange2: #ffc201;
      --orange1: #C99901;
      --schwarz: #ffffff;
      --permaschwarz: #000000;
      --weiss: #000000;
      --permaweiss: #ffffff;
      --braun1: #c29257;
      --braun2: #8f693b;
      --text: #909090;
      --hintergrund: #1a1a1a;
      --kalt: #009dff;
	  --hx: #1BC200;
	  --bubble: var(--green1);
      --permagrau: #4A4A4A;
	  --img-personen: url("/wp-content/uploads/anderles/icons/personen_hell.webp");
      --img-planner: url("/wp-content/uploads/anderles/icons/planner_hell.webp");
		--img-haus: url("/wp-content/uploads/anderles/icons/haus_hell.webp");
		--img-hund: url("/wp-content/uploads/anderles/icons/hund_hell.webp");
}

	body .btn-next.last.bigDevices, body .btn-prev.bigDevices  {
	filter:invert(0);
	}

	body.dark-theme .btn-next.last.bigDevices, body.dark-theme .btn-prev.bigDevices  {
	filter:invert(1);
	}

body.dark-theme .tempimg {
	background-image:url("/wp-content/uploads/anderles/Header/temp_dark.webp");
	background-repeat: no-repeat;
}

body.dark-theme #tv-button {
	background-image:url("/wp-content/uploads/anderles/Header/tv_dark.webp");
    background-repeat: no-repeat;
}

body.dark-theme .raumplan img {
    filter: invert(0.9);
}

body.dark-theme nav.mobile_menu img{
    filter:invert(0);
}

@media (prefers-color-scheme: dark) {
    body{
      --green2: #139900;
      --green1: #0d6800;
      --orange2: #ffc201;
      --orange1: #C99901;
      --schwarz: #ffffff;
      --permaschwarz: #000000;
      --weiss: #000000;
      --permaweiss: #ffffff;
      --braun1: #c29257;
      --braun2: #8f693b;
      --text: #909090;
      --hintergrund: #1a1a1a;
      --kalt: #009dff;
	  --hx: #1BC200;
	  --bubble: var(--green1);
      --permagrau: #4A4A4A;
	  --img-personen: url("/wp-content/uploads/anderles/icons/personen_hell.webp");
      --img-planner: url("/wp-content/uploads/anderles/icons/planner_hell.webp");
	  --img-haus: url("/wp-content/uploads/anderles/icons/haus_hell.webp");
	  --img-hund: url("/wp-content/uploads/anderles/icons/hund_hell.webp");
    }

.tempimg{
	background-image:url("/wp-content/uploads/anderles/Header/temp_dark.webp");
	background-repeat: no-repeat;
}


.raumplan img {
    filter: invert(0.9);
}

nav.mobile_menu img{
    filter:invert(0);
}
    body.light-theme{
    --green1: #139900;
    --green2: #0d6800;
    --orange1: #ffc201;
    --orange2: #C99901;
    --schwarz: #000000;
    --permaschwarz: #000000;
    --weiss: #ffffff;
    --permaweiss: #ffffff;
    --braun1: #c29257;
    --braun2: #8f693b;
    --text: #4A4A4A;
    --hintergrund: #e5e5e5;
    --kalt: #003aa7;
	--hx: var(--green2);
	--bubble: var(--green2);
    --permagrau: #4A4A4A;
	--img-personen: url("/wp-content/uploads/anderles/icons/personen.webp");
    --img-planner: url("/wp-content/uploads/anderles/icons/planner.webp");
    --img-haus: url("/wp-content/uploads/anderles/icons/haus.webp");
    --img-hund: url("/wp-content/uploads/anderles/icons/hund.webp");
}

body.light-theme .tempimg{
	background-image:url("/wp-content/uploads/anderles/Header/temp.webp");
	background-repeat: no-repeat;
}

body.light-theme .raumplan img {
    filter: invert(0);
}

body.light-theme nav.mobile_menu img{
    filter:invert(1);
}


	body .btn-next.last.bigDevices, body .btn-prev.bigDevices  {
	filter:invert(1);
	}

	body.light-theme .btn-next.last.bigDevices, body.light-theme .btn-prev.bigDevices  {
	filter:invert(0);
	}

}


/* --- File: anderles-styles --- */

/*   
Theme Name: Anderles
Theme URI: anderles.at
Description: Anderles Template 2022
Author: Niklas Brandstätter, unterstützt von Melanie Klupper
Author URI: anderles.at
*/

@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/wp-content/themes/anderles2026/fonts/open-sans-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('/wp-content/themes/anderles2026/fonts/open-sans-700.woff2') format('woff2');
}



body{
    color: #333; 
    background: var(--hintergrund);
    }
 
#wrapper{
    width: 100%;
    max-width: 3500px; 
    margin: 0 auto;      /* war: auto */
    text-align: left; 
    background: var(--hintergrund);
    }
    
#header{


    }

.main-img {
    max-width: 1351.5px;
    margin: 0 auto;
    margin-top: 0.4cqi !important;
}

.main-img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3720 / 317;
    object-fit: cover;
    box-sizing: border-box;
    border: solid 2px var(--green2);
    border-radius: 0;
    margin: 0;
    padding: 0;
}

#main{
    max-width: 1351.5px; 
    margin: auto;
    margin-top: 0.5cqi !important;
    border-radius:0 !important;
    border: solid 2px;
    border-radius: 0;
    border-color: var(--green2);
	padding: 2rem;
}

    
#footer {
    clear: both;
    height: 100%; 
    padding: 2cqi;
    background-color: #292929;
    color: var(--permaweiss);
}
#footer p {
	color: var(--permaweiss);
    text-align:center;
	padding-bottom: 2.5cqi;
}
#footer a {
    padding: 2cqi;
    text-decoration: none;
    }

.slider-mobile a {
    padding: 0;

    }

.footer_menu {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.footer-menu{
	width: 23cqi;
}

.footer_menu ul.footer-menu {
	list-style: none;
	display: flex;
    padding:0;
    width:100%;
}

.footer_menu .footer-menu li a {
    display: unset;
    width:inherit;
    height:inherit;
    vertical-align: middle;
    font-size: 16px;
    letter-spacing: 0px;
    line-height: 24px;
    opacity: 1;
    font-weight: 400 !important;
    color: var(--permaweiss);
    text-shadow: none;
    text-align: center;
}

.footer_menu .footer-menu li a:hover {
    display: unset;
    width:inherit;
    height:inherit;
    vertical-align: middle;
    font-size: 16px;
    letter-spacing: 0px;
    line-height: 24px;
    opacity: 1;
    font-weight: 400 !important;
    color: var(--permaweiss);
    text-shadow: none;
    text-align: center;
}

@media screen and (max-width : 1129px){

	#sidebar{
		width: 5%;


		}
		
	.sidebar-partner{
		width: 5%;

	}

}

@media screen and (max-width : 550px){
    .footer_menu ul.footer-menu {
        list-style: none;
        display: block;
        padding:0;
        width:100%;
    }
}

@media (min-width: 501px) and (max-width: 900px) {
	.main-img {
		max-width: 901.5px !important;
		margin-top: -0.8cqi !important;
		margin-left: 0.4cqi !important;
		margin-right: 0.4cqi !important;
	}

	.main-img img {
	  	border: solid 2px !important;
		border-color: var(--green2) !important;
	}

    #main {
		margin-left: 0.4cqi !important;
		margin-right: 0.4cqi !important;
        margin-top: 1cqi !important;
	}
}

@media (max-width: 500px) {
	.main-img {
		max-width: 500px !important;
		margin-top: -17.6cqi !important;
		margin-left: 0.95cqi !important;
		margin-right: 0.95cqi !important;

	}

	.main-img img {
	  	border: solid 2px !important;
		border-color: var(--green2) !important;
	}

    #main {
		margin-left: 0.95cqi !important;
		margin-right: 0.95cqi !important;
        margin-top: 1.5cqi !important;
        padding: 2rem !important;
        padding-left:1rem !important;
        padding-right:1rem !important;

	}
}


@media (min-width: 1920px) {
  .main-img,
  #main {
    /* 1920px ist Basis-Designbreite: Skaliert auf 2560px um den Faktor ~1.33x */
    transform-origin: top center;
    width: 1920px;
    max-width: calc((1350 * 100vw) / 1920);
    margin: 0 auto;
  }
}
    


/* --- File: anderles-header --- */
* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; }

    body {
      background-color: var(--hintergrund); color: var(--permaweiss);
	  font-family: "Open Sans", sans-serif;
      display: flex; flex-direction: column; align-items: center; min-height: 100vh; padding: 0;
    }

	.header2026-wrapper{
		display: block;
		font-family: "Open Sans", sans-serif;
	}

	#header2026-box09 .header2026-box09-lang-pl .header2026-box09-text a,
	#header2026-box09 .header2026-box09-lang-nl .header2026-box09-text a,
	#header2026-box09 .header2026-box09-lang-cs .header2026-box09-text a,
	#header2026-box09 .header2026-box09-lang-sk .header2026-box09-text a,
	#header2026-box09 .header2026-box09-lang-hu .header2026-box09-text a,
	#header2026-box09 .header2026-box09-lang-sl .header2026-box09-text a,
	#header2026-box09 .header2026-box09-lang-it .header2026-box09-text a,
	#header2026-box09 .header2026-box09-lang-es .header2026-box09-text a,
	#header2026-box09 .header2026-box09-lang-fr .header2026-box09-text a {
		font-size: 4.7cqi !important;
		line-height: 1.5 !important;    
	}


	.header2026-wrapper {
      width: 100%;
      display: flex; justify-content: center; align-items: center;
      margin-top: 0.2cqi;
      /* Platzhalter für den Layout-Shift (CLS) auf dem Desktop */
      aspect-ratio: 1250 / 400; 
      max-height: calc(1350px * (400 / 1250)); /* Deckelt die Höhe passend zur max-width von 1350px */
    }

    .header2026-container {
      position: relative; width: 100%; max-width: 1350px; aspect-ratio: 1250 / 400;
      background-color: var(--hintergrund); overflow: visible; container-type: inline-size;
    }

    .header2026-bg-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; overflow: visible; }
    .header2026-overlay-full { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 26; pointer-events: none; }
    .header2026-overlay-full > * { pointer-events: auto; }

    /* === ABSOLUTE BOXEN === */
    .header2026-abs-box { position: absolute; z-index: 25; }
    a.header2026-abs-box { text-decoration: none; cursor: pointer; }

    /* WABEN */
    .header2026-hex-box { position: absolute; z-index: 5; pointer-events: auto; }
    #header2026-box13 { z-index: 10; top: 39.25%; left: 38.869%; width: 22.263%; height: 60.25%; }
    #header2026-box11 { top: 0%; left: 14.874%; width: 28.637%; height: 77.5%; z-index:26; }
    #header2026-box12 { top: 0%; left: 56.489%; width: 28.637%; height: 77.5%; z-index:26;}

	#header2026-box13 svg image {
	  x: -0.1cqi !important; 
	  y: 0.05cqi !important; 
	}


    /* LINKE BOXEN */
    #header2026-box01 { top: 0%; left: 0%; width: 21.11%; height: 17.5%; }
    #header2026-box02 { top: 20%; left: 0%; width: 17.41%; height: 17.5%; }
    #header2026-box03 { top: 40%; left: 0%; width: 17.41%; height: 17.5%; }
    #header2026-box04 { top: 60%; left: 0%; width: 21.11%; height: 17.5%; z-index: 26;}
    #header2026-box05 { top: 60%; left: 0%; width: 43.51%; height: 39.5%; }

    /* MITTE (Temp Box) */
    .header2026-box14 { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 30; }
    #header2026-box06 { top: 15%; left: 40.046%; width: 19.906%; height: 21.75%; }

    /* RECHTE BOXEN */
    #header2026-box07 { top: 0%; left: 78.89%; width: 21.11%; height: 12%; }
    #header2026-box08 { top: 14.5%; left: 81.57%; width: 18.43%; height: 43%; pointer-events: auto; }
    #header2026-box09 { top: 60%; left: 56.49%; width: 21.60%; height: 39.5%; }
    #header2026-box10 { top: 60%; left: 78.89%; width: 21.11%; height: 39.5%; }

    /* === INHALTE & STYLING === */
    .header2026-box01-content { position: relative; display: flex; align-items: center; width: 100%; height: 100%; gap: 0.8cqi; padding: 0 1.2cqi; z-index: 21; pointer-events: none; }
    .header2026-box01-img { width: 3.5cqi; height: 3.5cqi; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
    .header2026-box01-img img { width: 100%; height: 100%; object-fit: contain; margin:0;}
    .header2026-box01-text { font-size: 0.95cqi; font-weight: bold; color: var(--schwarz); line-height: 1.1; }

    .header2026-box02-icon { width: 3.5cqi; height: 3cqi; position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .header2026-box02-svg { height: 100%; width: auto; }
    .header2026-box02-svg polygon { fill: var(--green2); stroke: var(--schwarz); stroke-width: 1.8; }
    .header2026-box02-inner { width: 2.2cqi; height: 2.2cqi; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); stroke: var(--orange1); fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; z-index: 2; }
    .header2026-box02-text { font-size: 1cqi; font-weight: bold; color: var(--schwarz); line-height: 1.2; }

    .header2026-box05-inner { position: absolute; bottom: 0; height: 50.63%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.5cqi;}
    .header2026-box09-inner { position: absolute; bottom: 0; left: 0; height: 50.63%; width: 100%; display: flex; align-items: center; justify-content: flex-start; padding-left: 12%; gap: 1cqi; pointer-events: auto; margin: 0; }
    .header2026-box10-inner { position: absolute; bottom: 0; height: 50.63%; width: 100%; display: flex; align-items: center; justify-content: center; padding-right: 1.5cqi; gap: 1cqi; }

    .header2026-box05-row { display: flex; align-items: center; justify-content: center; gap: 0.8cqi; width: 100%; margin-top: 0.5cqi;}
    .header2026-box05-icon { width: 3cqi; height: 3cqi; position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .header2026-box05-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    .header2026-box05-svg polygon { fill: var(--green2); stroke: var(--schwarz); stroke-width: 1.8; }
    .header2026-box05-inner-icon { width: 1.6cqi; height: 1.6cqi; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); stroke: var(--orange1); fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
    .header2026-box05-large { font-size: 1.6cqi; font-weight: 900; color: var(--schwarz); letter-spacing: 0.04cqi; text-align: center; line-height: 1.15; white-space: nowrap; margin: 0;}
    .header2026-box05-hl { color: var(--orange2); }
    .header2026-box05-sub { font-size: 0.88cqi; font-weight: 700; color: var(--schwarz); letter-spacing: 0.04cqi; text-align: center; text-transform: uppercase; white-space: nowrap; width: 100%; margin: 0; line-height: 1.15;  margin-bottom: 0.7cqi;}

    .header2026-box14-flag { width: 3.28cqi; height: 2.24cqi; display: flex; border: 0.08cqi solid var(--green1); background-color: var(--permaweiss); margin-bottom: 0.32cqi; }
    .header2026-box14-half { width: 50%; height: 100%; object-fit: cover; -webkit-border-radius: 0px; border-radius: 0px; margin: 0 0px 0px 0;}

    .header2026-box06-overlay { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 2.5cqi; pointer-events: none; }
    .header2026-box06-side { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .header2026-box06-div { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 0.08cqi; height: 6.2cqi; background: linear-gradient(to bottom, transparent, var(--green2), transparent); opacity: 0.6; margin: 0; z-index: 30; }
    .header2026-box06-lbl { font-size: 0.8cqi; font-weight: 700; text-transform: uppercase; margin-bottom: 0.16cqi; }
    .header2026-box06-lbl-a { color: var(--orange2); }
    .header2026-box06-lbl-b { color: var(--green2); }
    .header2026-box06-vrow { display: flex; align-items: center; gap: 0.4cqi; }
    .header2026-box06-img { width: 1.6cqi; height: 1.6cqi; object-fit: contain; margin: 0px;}
    .header2026-box06-val { font-size: 1.10cqi; font-weight: 900; white-space: nowrap; }
    .header2026-box06-val-a { color: var(--orange1); } 
    .header2026-box06-val-b { color: var(--permaweiss); }

    .header2026-box07-wrap { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; gap: 0.96cqi; font-size: 1.12cqi; font-weight: bold; color: var(--permaweiss); padding-left: 2cqi; }
    .header2026-box07-body { width: 3.36cqi; height: 1.76cqi; background-color: var(--green1); clip-path: polygon(15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%); position: relative; cursor: pointer; }
    .header2026-box07-body::before { content: ''; position: absolute; top: 0.2cqi; bottom: 0.2cqi; left: 0.2cqi; right: 0.2cqi; background-color: #ccc; clip-path: polygon(15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%); z-index: 0; }
    .header2026-box07-knob { position: absolute; top: 0.32cqi; right: 0.32cqi; width: 1.28cqi; height: 1.12cqi; background-color: var(--green1); clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); z-index: 1; }

    .header2026-box08-overlay { position: absolute; width: 100%; height: 100%; display: flex; padding-left: 15%; padding-right: 5%; }
    .header2026-box08-logo { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; pointer-events: auto; }
    .header2026-box08-logo img { max-width: 90%; max-height: 90%; object-fit: contain; }

    /* --- SOCIAL MENU KLICKBAR MACHEN --- */
    #header2026-box08 .sozial_menu,
    #header2026-box08 ul#menu-social_media_menu a {
      pointer-events: auto !important;
      cursor: pointer !important;
    }

    .header2026-box09-icon { width: 3.4cqi; height: 13cqi; position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .header2026-box09-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    .header2026-box09-svg polygon { fill: var(--green2); stroke: var(--schwarz); stroke-width: 1.8; }
    .header2026-box09-inner-icon { width: 2cqi; height: 2cqi; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); stroke: var(--orange1); fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
    .header2026-box09-text { font-size: 1.05cqi; font-weight: 800; color: var(--schwarz); text-align: left; line-height: 1.2; letter-spacing: 0.032cqi; }

    .header2026-box10-bubble { 
      display: flex; align-items: center; margin: 0; padding: 0.4em 1em; 
      background: var(--green2); color: var(--permaweiss); font-size: 1cqi;
      font-family: "Open Sans", sans-serif; font-weight: 700; line-height: 1.2em; 
      border-radius: 2em; text-align: center; position: relative; 
    }
    .header2026-box10-bubble::after { 
      content: ''; position: absolute; top: 50%; right: -0.4em; transform: translateY(-50%); 
      width: 0; height: 0; border-top: 0.4em solid transparent; border-bottom: 0.4em solid transparent; border-left: 0.5em solid var(--green2); 
    }
    .header2026-box10-menu { display: flex; align-items: center; pointer-events: auto; }
    .header2026-box10-list { list-style: none; display: flex; flex-direction: row; padding: 0; margin: 0; gap: 0.6cqi; }
    .header2026-box10-item { width: 2.8cqi; height: 2.8cqi; }
    .header2026-box10-menu a { display: block; line-height: 2.8cqi; font-size: 0px; background-size: contain; background-position: center; background-repeat: no-repeat; width: 100%; height: 100%; }
    
    .header2026-box10-item a[title="insta"] { background-image: url("/wp-content/uploads/anderles/sozialmenu/Instagram_Glyph_White.webp"); }
    .header2026-box10-item a[title="fb"] { background-image: url("/wp-content/uploads/anderles/sozialmenu/Facebook_Logo_Secondary.webp"); }
    .header2026-box10-item a[title="youtube-profil"] { background-image: url("/wp-content/uploads/anderles/sozialmenu/yt_icon_mono_dark.webp"); }
    .header2026-box10-item a[title="tiktok-link"] { background-image: url("/wp-content/uploads/anderles/sozialmenu/TikTok_Icon_Black_Circle_1.webp"); }

    .header2026-hex-box svg { width: 100%; height: 100%; display: block; overflow: visible; }

    .tempimg.header2026-box06-img {
      background-size: 1.6cqi !important;
      padding-top: 0.1cqi !important;
    }


/* Container für proportionale Werte */
#header2026-box09 {
  container-type: inline-size;
  position: relative;
}

/* Inhalts-Overlay ohne störendes Padding */
/* 1. Übergeordnetes Overlay komplett auf Null zwingen */
#header2026-box09 .header2026-overlay-full {
  position: absolute;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 0 !important;       /* Löscht verdeckte Abstände */
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
}


/* Großes Sechseck-Icon */
#header2026-box09 .header2026-box09-icon {
  position: relative;
  width: 19cqw;          /* Schön groß */
  aspect-ratio: 115.47 / 100;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sechseck Kontur */
#header2026-box09 .header2026-box09-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--green1);
  stroke-width: 4px;
  vector-effect: non-scaling-stroke;
}

.header2026-box02-inner,
.header2026-box05-inner-icon,
.header2026-box09-inner-icon{ 
      width: 55%; 
      height: 55%; 
      position: absolute; 
      top: 50%; 
      left: 50%; 
      transform: translate(-50%, -50%); 
      stroke: #e5e5e5; 
      fill: none; 
      stroke-width: 2; 
      stroke-linecap: round; 
      stroke-linejoin: round; 
      z-index: 2;
}

/* WordPress-Menü Reset */
#header2026-box09 .header2026-box09-text,
#header2026-box09 .header2026-box09-text li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#header2026-box09 .header2026-box09-text a {
  display: block !important;
  white-space: normal !important;   /* Erlaubt den Umbruch wieder */
  max-width: 15ch !important;       /* Bricht exakt nach "Gruppenurlaub" um */
  font-size: 5.1cqi !important;     /* Skaliert flüssig zweizeilig mit */
  line-height: 1.7 !important;      /* Kompakter Zeilenabstand (gefixt) */
  font-weight: 800 !important;
  color: var(--schwarz) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  text-shadow: none !important;
  letter-spacing:unset !important;
}

/* =========================================================
   BOX 10 (SLIDER - VERBINDLICHE GRÖSSE ÜBER CQI)
   ========================================================= */

#header2026-box10 {
  position: absolute !important;
  top: 60% !important;
  left: 78.89% !important;
  width: 21.11% !important;
  height: 39.5% !important;
  z-index: 35 !important;
}

#header2026-box10 .header2026-overlay-full {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

/* Zwischencontainer neutralisieren */
#header2026-box10 .sidebar-partner,
#header2026-box10 .widget-area,
#header2026-box10 .slider {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Slide-Bild: Rechts verankert, skaliert direkt über den Header */
#header2026-box10 img.mySlides {
  position: absolute !important;
  right: 3.5cqi !important;           /* Kleiner Abstand zur rechten Außenkante */
  top: 50% !important;
  transform: translateY(-50%) !important;

  /* ECHTE BREITE: 17cqi füllt fast die gesamte 21.11%-Box aus */
  width: 13cqi !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;

  object-fit: contain !important;
  pointer-events: auto !important;
  margin: 0 !important;
}

/* W3.CSS Fading-Fehler neutralisieren */
#header2026-box10 img.mySlides[style*="display: block"] {
  opacity: 1 !important;
  visibility: visible !important;
}

folge_text{
    padding-left: 0 !important;
}
/* =========================================================
   BOX 08: SPRECHBLASE (DYNAMISCH, EXTRA BREIT & ZENTRIERT)
   ========================================================= */



#header2026-box08 .speech-bubble {
  /* Perfekte Zentrierung von Box & Text */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  /* Breiter Schnitt & dynamische Maße über cqi */
  width: fit-content !important;
  min-width: 11cqi !important;          /* Hält die Blase horizontal gestreckt */
  padding: 0.9cqi 3.8cqi !important;   /* Oben/Unten kompakt, links/rechts breit */
  border-radius: 1.6cqi !important;     /* Dynamische Rundung statt 20px */

  /* Farb- und Stilvariablen */
  background: var(--permagreen2) !important;
  color: var(--permaweiss) !important;
  font-size: 1.2cqi !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  rotate: -2deg !important;

  position: relative !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

/* Dreiecks-Spitze passend in var(--green2) */
#header2026-box08 .speech-bubble::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 0.55cqi solid transparent !important;
  border-right: 0.55cqi solid transparent !important;
  border-top: 0.65cqi solid var(--permagreen2) !important;
  border-bottom: none !important;
}

/* =========================================================
   BOX 08: SYMBOLE ALS DREIECK (1 OBEN / 3 UNTEN)
   ========================================================= */
.header2026-box08-overlay {
  padding-left: 5%;
  padding-right: 5%;
  margin-top: 1cqi;
}


/* Abstand zwischen Sprechblase und Symbolen vergrößert + deine Margins */
#header2026-box08 .sozial_menu {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.8cqi !important;
  margin-top: 0cqi;
  margin-left: 2cqi;
  width: 100% !important;
}

#header2026-box08 .menu-social_media_menu-container {
  display: block !important;
  width: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Das Dreiecks-Raster: 3 Spalten mit fester Zuordnung */
#header2026-box08 ul#menu-social_media_menu {
  list-style: none !important;
  margin: 0 auto !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns: repeat(3, auto) !important;
  grid-template-areas:
    ".   top  ."
    "b1  b2   b3" !important;

  justify-content: center !important;
  align-items: center !important;
  gap: 0.8cqi 1cqi !important;
  width: fit-content !important;
}

#header2026-box08 ul#menu-social_media_menu li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
}

/* 1. Symbol oben in der Mitte */
#header2026-box08 ul#menu-social_media_menu li:nth-child(1) {
  grid-area: top !important;
}

/* 2., 3. und 4. Symbol nebeneinander in der Reihe darunter */
#header2026-box08 ul#menu-social_media_menu li:nth-child(2) {
  grid-area: b1 !important;
}
#header2026-box08 ul#menu-social_media_menu li:nth-child(3) {
  grid-area: b2 !important;
}
#header2026-box08 ul#menu-social_media_menu li:nth-child(4) {
  grid-area: b3 !important;
}

/* Symbole: Verkleinert auf 2.8cqi */
#header2026-box08 ul#menu-social_media_menu a {
  display: block !important;
  width: 2.8cqi !important;
  height: 2.8cqi !important;
  font-size: 0 !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transition: transform 0.2s ease !important;
}


#header2026-box08 .speech-bubble::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 100% !important;

  /* Hier auf 30% gesetzt (ergibt automatisch 70% Rest nach rechts) */
  left: 30% !important;
  transform: translateX(-50%) !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 0.1cqi solid transparent !important;
  border-right: 1.1cqi solid transparent !important;
  border-top: 1.7cqi solid var(--permagreen2) !important;
  border-bottom: none !important;
}
/* =========================================================
   BOX 07: DARKMODE SWITCH (ANIMATION & FARBREGELN GEFIXT)
   ========================================================= */

/* Klick-Blockade der SVGs durchbrechen */
#header2026-box07 {
  pointer-events: none !important; 
}

#header2026-box07 .header2026-box07-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  gap: 0.8cqi !important;
  color: var(--text) !important;
  font-size: 0.95cqi !important;
  font-weight: 600 !important;
  pointer-events: auto !important; 
}

#header2026-box07 .header2026-box07-wrap span{
  color: var(--schwarz) !important;
}

/* =========================================================
   ZUSTAND: AUS (Körper Weiß)
   ========================================================= */
#header2026-box07 .header2026-box07-body {
  position: relative !important;
  display: inline-block !important;
  width: 5.2cqi !important;
  height: 2.4cqi !important;
  background-color: #ccc !important; /* REGEL: Aus = Weiß */
  /* Die weiche Animation für den Hintergrund: */
  transition: all 0.4s ease !important; 
}

/* Unsichtbare Checkbox, die Klicks abfängt */
#header2026-box07 input#schema {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 10 !important;
}

/* ZUSTAND: AUS (Kugel Links & Sichtbar) */
#header2026-box07 .header2026-box07-knob {
  position: absolute !important;
  top: 0.2cqi !important;
  left: 0.2cqi !important;
  width: 2.4cqi !important;
  height: 2.0cqi !important;
  background-color: var(--green2) !important; /* Grün als Kontrast auf dem weißen Schalter */
  
  /* Der Startpunkt für die weiche Animation (Links) */
  transform: translateX(0) !important; 
  /* Die weiche Gleit-Animation für die Kugel: */
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; 
  
  pointer-events: none !important;
  z-index: 1 !important;
}

/* =========================================================
   ZUSTAND: EIN (Körper Orange & Kugel Rechts)
   ========================================================= */

/* Körper wird Orange */
#header2026-box07 .header2026-box07-body.switch-on::before {
  background-color: var(--orange1, #ff9800) !important; /* REGEL: Ein = Orange */
}

/* Kugel gleitet nach Rechts und wird Weiß */
#header2026-box07 .header2026-box07-body.switch-on .header2026-box07-knob {
  /* REGEL: Ein = Rechts (fährt exakt an den rechten Rand) */
  transform: translateX(2.4cqi) !important;
  background-color: var(--green1) !important;
}

#header2026-box07 .header2026-box07-body.switch-on {
  background-color: var(--orange1) !important; /* REGEL: Aus = Weiß */
}

.header2026-box14{
    top: 1.2cqi;
}

.header2026-box14 img{
    margin: 0;
    width: 3.4cqi !important;
    height: 2.2cqi !important;
    border: 1px solid;
    border-radius: 0;
    border-color: var(--permaweiss);
    
}
.header2026-box14 ul li{
    list-style: none;
}

.menu-lang-menu,
.lang-menu-item a,
.lang-menu-item span
{
	width: 3.4cqi !important;
	height: 2.2cqi !important;
}


/* Dropdown-Menü (sub-menu) verstecken */
.lang-menu-item .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  padding: 1cqi 0 0 0;
  z-index: 9999;
  min-width: 13cqi;
  background-color: rgba(0, 0, 0, 0.7);
  left: -6.35cqi;
}

/* Sichtbar machen bei Hover über den Parent */
.lang-menu-item li:hover > .sub-menu {
  display: grid;
  grid-template-columns: repeat(3, 2fr);
}

/* Links im Dropdown-Menü */
.lang-menu-item .sub-menu a {
  display: flex;
  align-items: center;
  margin: 0 0 1cqi 0;
  width: 5.4cqi !important;
  height: 3.2cqi !important;
  padding: 0.5cqi 1cqi;
}
.lang-menu-item .sub-menu  ul li{
    justify-content: center;
}

/* Hover-Effekt für Dropdown-Links */
.lang-menu-item .sub-menu a:hover {
  background-color: var(--green1);
}

.lang-item-sö {
  display: none !important;
}

.header2026-box05-lang-fr .header2026-box05-sub,
.header2026-box05-lang-sk .header2026-box05-sub,
.header2026-box05-lang-pl .header2026-box05-sub,
.header2026-box05-lang-nl .header2026-box05-sub{
    font-size: 0.8cqi;
}

.header2026-box05-lang-fr .header2026-box05-large{
    font-size: 1.3cqi;
}

.header2026-box05-lang-es .header2026-box05-large{
    font-size: 1.4cqi;
}


/* --- 1. TRANSITIONS (Für weiche Übergänge) --- */

/* Rahmen der Boxen (01-04, 09) und großen Boxen (11, 12) */
#header2026-box01 .header2026-bg-svg polygon,
#header2026-box02 .header2026-bg-svg polygon,
#header2026-box03 .header2026-bg-svg polygon,
#header2026-box04 .header2026-bg-svg polygon,
#header2026-box09 .header2026-bg-svg polygon,
#header2026-box11 svg > polygon,
#header2026-box12 svg > polygon {
    transition: stroke 0.3s ease;
}

/* Icons und Texte der Boxen (01-04 und 09) */
#header2026-box01 .header2026-box01-img img,
#header2026-box01 .header2026-box01-text,
#header2026-box02 .header2026-box02-icon,webp
#header2026-box02 .header2026-box02-text,
#header2026-box03 .header2026-box02-icon,
#header2026-box03 .header2026-box02-text,
#header2026-box04 .header2026-box02-icon,
#header2026-box04 .header2026-box02-text,
#header2026-box09 .header2026-box09-icon,
#header2026-box09 .header2026-box09-text {
    transition: transform 0.3s ease;
    display: inline-block; 
}

/* Text und Textbox-Rechtecke (<rect>) bei den großen Boxen (11, 12) */
#header2026-box11 svg rect,
#header2026-box11 svg text,
#header2026-box12 svg rect,
#header2026-box12 svg text {
    transition: opacity 0.3s ease;
}


/* --- 2. HOVER-EFFEKTE --- */

/* Rahmenfarbe für die definierten Boxen auf var(--orange2) ändern */webp
#header2026-box01:hover .header2026-bg-svg polygon,
#header2026-box02:hover .header2026-bg-svg polygon,
#header2026-box03:hover .header2026-bg-svg polygon,
#header2026-box04:hover .header2026-bg-svg polygon,
#header2026-box09:hover .header2026-bg-svg polygon,
#header2026-box11:hover svg > polygon,
#header2026-box12:hover svg > polygon {
    stroke: var(--orange2);
}

/* Zoom-Effekt für Icons und Text (01-04 und 09) */
#header2026-box01:hover .header2026-box01-img img,
#header2026-box01:hover .header2026-box01-text,
#header2026-box02:hover .header2026-box02-icon,
#header2026-box02:hover .header2026-box02-text,
#header2026-box03:hover .header2026-box02-icon,
#header2026-box03:hover .header2026-box02-text,
#header2026-box04:hover .header2026-box02-icon,
#header2026-box04:hover .header2026-box02-text,
#header2026-box09:hover .header2026-box09-icon,
#header2026-box09:hover .header2026-box09-text,
#header2026-box08 ul#menu-social_media_menu li a:hover{
    transform: scale(1.1);
}

#header2026-box08 ul#menu-social_media_menu li a {
    z-index:30;
}

/* Text und Textbox-Rechtecke (<rect>) bei den großen Boxen ausblenden */
#header2026-box11:hover svg rect,
#header2026-box11:hover svg text,
#header2026-box12:hover svg rect,
#header2026-box12:hover svg text {
    opacity: 0;
}

/* =========================================================
   AKTIVER MENÜPUNKT (Dauerhaft orange markiert)
   ========================================================= */
.header2026-abs-box.active-box .header2026-bg-svg polygon,
.header2026-hex-box.active-box svg > polygon {
    stroke: var(--orange2) !important;
}

/* =========================================================
	   Rahmen für sozial bubble in dark mode
   ========================================================= */
body.dark-theme #header2026-box08 .speech-bubble {
  filter: 
    drop-shadow(2px 0 0 var(--permaweiss)) 
    drop-shadow(-2px 0 0 var(--permaweiss)) 
    drop-shadow(0 2px 0 var(--permaweiss)) 
    drop-shadow(0 -2px 0 var(--permaweiss)) !important;
}

@media (min-width: 1920px) {
  .header2026-container {
    /* 1920px ist Basis-Designbreite: Skaliert auf 2560px um den Faktor ~1.33x */
    transform-origin: top center;
    width: 1920px;
    max-width: calc((1350 * 100vw) / 1920);
    margin: 0 auto;
  }
}
@media (max-width: 800px) {
	.header2026-wrapper{
		display: none;
	}
}


/* --- File: anderles-header800 --- */
/* =========================================================================
   MOBILE RASTER 800PX - KOMPLETTES LAYOUT
   ========================================================================= */
.header2026-800-wrapper { display: none; }


@media (min-width: 501px) and (max-width: 900px) {
    /* Desktop Header ausblenden */
    .header2026-wrapper { display: none !important; }
    
	.header2026-800-wrapper {
		font-family: "Open Sans", sans-serif;
        display: block !important;
        width: 99%; /* Zieht exakt 1% ab, was links und rechts genau 0.5cqi Rand ergibt */
        margin: 0 auto; /* Zentriert den Header perfekt */
        position: relative; 
        padding-bottom: 2cqi;
        container-type: inline-size;
    }

    .header2026-800-bg-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
    .header2026-800-content {
        position: relative; z-index: 2; width: 100%; height: 100%;
        display: flex; flex-direction: column; align-items: center; justify-content: center; 
        color: var(--schwarz); text-align: center;
    }
    .header2026-800-txt { font-size: 2.5cqi; font-weight: bold; color: var(--schwarz);}

    /* ==========================================
       SPRACHAUSWAHL 
       ========================================== */
	.menu-lang-menu-1,
	.lang-menu-item a,
	.lang-menu-item span
	{
	height: auto !important;
    width: 6cqi !important;
	}


    .header2026-800-wrapper .header2026-box14-flag {
        width: auto;
        height: 4.5cqi;
        aspect-ratio: 1.464; 
        box-sizing: border-box;
        border: 0.12cqi solid var(--green1);
        border-radius: 0 !important; 
        background-color: var(--permaweiss);
        display: flex;
        overflow: hidden;
    }
    .header2026-800-wrapper .lang-menu-item img {
        height: auto !important;
        width: 6cqi !important;
        /* Das ideale Seitenverhältnis (4:3 Web-Standard oder 3:2 für breitere Flaggen) */
        aspect-ratio: 1.464 !important;

        margin: 0 !important;
        margin-top: 0cqi !important;
        border-radius: 0 !important;
        object-fit: cover;
        border: var(--permaweiss) solid 1px;

    }
    .header2026-800-wrapper .lang-menu-item .sub-menu {
        min-width: 27cqi !important;
        left: -10cqi !important;
        padding:0cqi !important;

    }

    .header2026-800-wrapper .lang-menu-item .sub-menu a {
        width: 8cqi !important;
        height: 7cqi !important;
        margin-bottom: 0cqi !important;

    }
    .header2026-800-wrapper .lang-menu-item, .header2026-800-wrapper .lang-menu-item li ul {
        list-style-type: none !important;

    }

    /* ==========================================
       DAS UNANTASTBARE ZENTRUM
       ========================================== */
    .header2026-800-center-cluster {
        position: relative;
        width: 100%; max-width: 900px; margin: 0 auto;
        margin-top: 2cqi; 
        aspect-ratio: 878.15 / 495; 
        z-index: 10;
    }

    .header2026-800-cluster-box, .header2026-800-abs-box { position: absolute; display: block; text-decoration: none; }
    .header2026-800-cluster-box svg { width: 100%; height: 100%; display: block; overflow: visible; }

    .header2026-800-lang-box {
        position: absolute;
        left: 50%;
        top: 2cqi;
        transform: translateX(-50%);
        z-index: 50;
    }	

    /* TV BOX & DARKMODE */
    #h800-box01 { top: 0%; left: 0%; width: 32%; height: 13.333%; z-index: 40; }
    #h800-box07 { top: 0%; right: 0%; width: 32%; height: 13.333%; z-index: 40; }

    .header2026-800-dark-body {
        position: relative; display: inline-block;
        width: 10cqi; height: 5cqi; 
        background-color: #ccc; clip-path: polygon(15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%);
        cursor: pointer; transition: all 0.4s ease;
    }
    .header2026-800-dark-body input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 10; }
    .header2026-800-dark-knob {
        position: absolute; top: 0.5cqi; left: 0.5cqi; width: 4cqi; height: 4cqi;
        background-color: var(--green2); clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; z-index: 1;
    }
    .header2026-800-dark-body.switch-on { background-color: var(--orange1); }
    .header2026-800-dark-body.switch-on .header2026-800-dark-knob { transform: translateX(5cqi); background-color: var(--green2); }

    /* BURGER MENU */
    #h800-box-menu { 
        top: 15.556%; 
        left: 32%; 
        width: 36%; 
        height: 10.5%; 
        z-index: 40; 
    }
    .header2026-800-burger-btn { width: 100%; height: 100%; cursor: pointer; display: block; position: relative; }
    
    .header2026-800-burger-dropdown {
        position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
        background: var(--hintergrund); border: 2px solid var(--green2);
        display: flex; flex-direction: column; width: 180%;
        opacity: 0; visibility: hidden; transition: all 0.2s ease; z-index: 50;
    }
    .header2026-800-burger-dropdown a { padding: 15px; color: var(--schwarz); text-decoration: none; font-size: 4.5cqi; border-bottom: 1px solid var(--green2); text-align: center; font-weight: bold; }
    .header2026-800-burger-dropdown a:hover { color: var(--orange2) !important;}
    #burger-toggle:checked ~ .header2026-800-burger-dropdown { opacity: 1; visibility: visible; margin-top: 5px; }

    /* ==========================================
       PARTNER LOGOS (Zentriert den Slider im Trapez)
       ========================================== */
    #h800-box06 { top: 27.778%; left: 35.831%; width: 28.335%; height: 17.778%; z-index: 20; }
    #h800-box06 .sidebar-partner { width: 100%; height: 100%; }
    #h800-box06 .slider { 
        width: 100%; 
        height: 100%; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
    }
    #h800-box06 .mySlides { 
        max-width: 85%; /* Lässt Luft zu den schrägen Kanten des SVG */
        max-height: 55%; 
        object-fit: contain; 
    }

    /* HÄUSER & LOGO */
    #h800-box11 { top: 15.556%; left: 0%; width: 40.763%; height: 62.556%; z-index: 26; }
    #h800-box12 { top: 15.556%; left: 59.237%; width: 40.763%; height: 62.556%; z-index: 26; }
    #h800-box13 { top: 47.222%; left: 34.155%; width: 31.690%; height: 48.667%; z-index: 30; }

    /* TEMPERATUR BADGES IN DEN WABEN */
    .header2026-temp-badge {
        position: absolute;
        top: 21%;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.65);
        padding: 0.5cqi 2cqi;
        border-radius: 20px;
        font-size: 3.5cqi;
        font-weight: bold;
        color: var(--permaweiss);
        display: flex;
        align-items: center;
        gap: 1cqi;
        z-index: 10;
        backdrop-filter: blur(2px);
        border: 1px solid rgba(255,255,255,0.1);
    }
    .header2026-temp-badge svg { width: 3.5cqi; height: 3.5cqi; }



    /* ==========================================
       SOCIAL MEDIA & GRUPPENURLAUB BUCHEN
       ========================================== */
    #h800-box08 { 
        top: 50%; 
        left: 0%; 
        width: 42%; 
        height: 45.889%; 
        z-index: 25; 
    }
    #h800-box08 .header2026-800-content {
        position: absolute; 
        top: 60%; 
        right: 17%; 
        width: 82.5%; 
        height: 40%; 
        display: flex; 
        flex-direction: column; 
        justify-content: center; 
        align-items: center;
    }
    #h800-box08 .sozial_menu { transform: scale(0.9); margin-top: -1cqi; }

    #h800-box09 { 
        top: 50%; 
        left: 58%; 
        width: 42%; 
        height: 45.889%; 
        z-index: 25; 
    }
    #h800-box09 .header2026-800-content {
        position: absolute; 
        top: 63%;
        left: 5%;
        width: 82.5%; 
        height: 40%; 
        display: flex; 
        flex-direction: row; 
        justify-content: center; 
        align-items: center;
        gap: 15px;
    }


	/* ==========================================
       SLOGAN
       ========================================== */
    .header2026-800-row-slogan {
        position: relative; width: 100%; display: flex; justify-content: center;
        margin-top: -1.1cqi; /* NEU: Exakt kalkuliert für den 10.87 Raster-Abstand */
        height: 12cqi; z-index: 20;
    }
    #h800-box05 { position: relative; width: 100%; height: 100%; }
    .header2026-800-slogan-hl { font-size: 4cqi; font-weight: bold; text-transform: uppercase; }
    .header2026-800-slogan-sub { font-size: 2.5cqi; color: var(--grau2); margin-top: 5px; }

    /* ==========================================
       HOVER & AKTIVE STATI
       ========================================== */
    .header2026-800-abs-box.active-box .header2026-800-bg-svg polygon,
    .header2026-800-cluster-box.active-box svg > polygon { 
		stroke: var(--orange2) !important; 
	}

    #h800-box11:hover svg > polygon, 
	#h800-box12:hover svg > polygon,
	#h800-box01:hover svg > polygon,
	#h800-box09:hover svg > polygon { 
		stroke: var(--orange2); 
	}
    #h800-box11:hover svg rect, 
	#h800-box11:hover svg text,
    #h800-box12:hover svg rect, 
	#h800-box12:hover svg text { 
		opacity: 0; 
	}
    #h800-box11 svg rect, #h800-box11 svg text,
    #h800-box12 svg rect, #h800-box12 svg text { transition: opacity 0.3s ease; }

/* Zoom-Effekt für Icons und Text (01-04 und 09) */
	#h800-box01:hover .header2026-800-content img,
	#h800-box01:hover .header2026-800-content span,
	#h800-box09:hover .header2026-box09-icon,
	#h800-box09:hover .header2026-box09-text {
		transform: scale(0.9);
	}


/* ==========================================
       SOCIAL MEDIA & GRUPPENURLAUB BUCHEN
       ========================================== */
    #h800-box08 { 
        top: 50%; 
        left: 0%; 
        width: 42%; 
        height: 45.889%; 
        z-index: 25; 
    }
    
    #h800-box08 .header2026-800-content {
        position: absolute; 
        top: 55%; 
        left: 5%;      
        width: 90%;    
        height: 45%; 
        display: flex; 
        align-items: center;
        justify-content: center;
    }
    
    /* Layout: Bubble Rechts, Icons Links */
    #h800-box08 .sozial_menu {
        display: flex;
        flex-direction: row-reverse; 
        align-items: center;
        justify-content: space-evenly; 
        width: 100%;
        margin: 0;
    }

    #h800-box08 .menu-social_media_menu-container {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Das Icon-Raster */
    #h800-box08 .menu-social_media_menu-container ul.menu {
        display: grid !important;
        grid-template-columns: repeat(3, auto); 
        gap: 1cqi 2cqi;                               
        justify-content: start;                 
        align-items: center;
        margin: 0;
        padding: 0;
        list-style: none;
        margin-left: -2.75cqi;
        margin-bottom: 4cqi;
    }
    
    /* YouTube (Erste Zeile, linksbündig) */
    #h800-box08 .menu-social_media_menu-container ul.menu li:first-child {
        grid-column: 1 / -1;  
        justify-self: start;                    
    }

    /* ==========================================
       ÜBERSCHREIBEN DER social_menu.css (SKALIERUNG)
       Hier löschen wir alle starren px/em Werte!
       ========================================== */

    /* Die Listen-Elemente: Statische 75px überschreiben */
    #h800-box08 .sozial_menu ul li {
        width: 7cqi !important;
        height: 7cqi !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex;
        margin-left: -1cqi !important; 
    }

    /* Die Links (a-Tags): Statische Background-Sizes überschreiben */
    #h800-box08 .menu-social_media_menu-container ul.menu li a {
		position: relative !important; 
        z-index: 999 !important; 
        pointer-events: auto !important;
        padding: 0 !important;  
        margin: 0 !important;             
        display: block !important;
        width: 100% !important; 
        height: 100% !important;
        background-size: 5.5cqi !important; /* Macht die Icons proportional */
        line-height: 1 !important;          /* Löscht die starren 75px line-height */
    }

    /* Die Sprechblase: px und em Werte komplett auf cqi umbiegen */
    #h800-box08 .speech-bubble {
        margin-top: 8.75cqi !important;   
        font-size: 2.3cqi !important;         /* Überschreibt 18px */
        padding: 1.5cqi 2.75cqi !important;    /* Überschreibt 5px 60px */
        border-radius: 2.5cqi !important;   /* Überschreibt 20px */
        line-height: 1.2 !important;        /* Überschreibt 3em */
        min-width: fit-content !important;
        rotate: 2deg !important;
		background-color: var(--permagreen2);
    }

    #h800-box08 .speech-bubble .folgetext::after{
        display:none;
    }

    /* Setzt das starre padding-left: 26px vom folge_text zurück */
    #h800-box08 .speech-bubble folge_text {
        padding-left: 0 !important; 
        font-size: inherit !important;
    }

    /* Auch den "Zipfel" der Blase müssen wir von 'em' auf 'cqi' zwingen */
    #h800-box08 .speech-bubble::after {
        border: 1cqi solid transparent !important;
        border-top-color: var(--permagreen2) !important;
        top: 66% !important;
        left: 11% !important;
        width: 0 !important;
        height: 0 !important;
        rotate: 79deg !important;
    }

/* 1. Weicher Übergang für den Zoom (kommt in den Normalzustand) */
    #h800-box08 .menu-social_media_menu-container ul.menu li a {
        transition: transform 0.2s ease-in-out !important; 
    }

    /* 2. Der eigentliche Zoom-Effekt beim Drüberfahren (Hover) */
    #h800-box08 .menu-social_media_menu-container ul.menu li a:hover {
        transform: scale(1.15) !important; /* !important erzwingt den Zoom */
    }

	body.dark-theme #h800-box08 .speech-bubble {
	  filter: 
		drop-shadow(2px 0 0 var(--permaweiss)) 
		drop-shadow(-2px 0 0 var(--permaweiss)) 
		drop-shadow(0 2px 0 var(--permaweiss)) 
		drop-shadow(0 -2px 0 var(--permaweiss)) !important;
	}


/* ==========================================
       SVG HOVER- & KLICK-KORREKTUR (Magic Trick)
       ========================================== */

    /* 1. Die unsichtbaren, eckigen HTML-Kästen für die Maus "durchlässig" machen */
    .header2026-800-cluster-box, 
    .header2026-800-abs-box {
        pointer-events: none !important;
    }

    /* 2. Den Hover/Klick NUR auf die bemalten SVG-Punkte beschränken */
    .header2026-800-bg-svg polygon,
    .header2026-800-cluster-box svg > polygon,
    .header2026-800-cluster-box svg image,
    .header2026-800-cluster-box svg rect,
    .header2026-800-cluster-box svg text {
        pointer-events: visiblePainted !important; /* Reagiert nur da, wo wirklich Farbe ist! */
        cursor: pointer;
    }

    /* 3. Alle HTML-Inhalte (Icons, Bubble, Text, Burger-Menü) wieder reaktiv machen */
    .header2026-800-content,
    .header2026-800-content *, /* Zwingt Icons und Links, klickbar zu bleiben */
    .header2026-temp-badge,
    .header2026-800-burger-btn,
    .header2026-800-dark-body,
	.header2026-800-burger-dropdown, /* NEU: Macht die Links im Dropdown wieder klickbar! */
    .header2026-800-lang-box {
        pointer-events: auto !important;
    }

 /* ==========================================
       Temperaturen
       ========================================== */

    .tempimg.h800-box08-img {
        background-size: 3.5cqi !important;
        padding-top: 0.1cqi !important;
        margin: 0;
        height: 4cqi;
    }

    /* Thermometer-Icon deutlich größer machen */
    .h800-box08-temp-left .tempimg,
    .h800-box08-temp-right .tempimg {
        width: 4.5cqi !important;  /* Mehr Platz in der Breite */
        height: 5cqi !important;   /* Mehr Platz in der Höhe */
        background-size: 4cqi !important; /* Das eigentliche Icon vergrößert (vorher 3cqi) */
        background-position: center !important;
        background-repeat: no-repeat !important;
        display: inline-block !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .h800-box08-temp-left {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        display: flex;
        left: 3.5cqi !important; 
        position: absolute;
    }

    .h800-box08-temp-right {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        display: flex;
        position: absolute;
        right: 3cqi !important; 
    }


    #temp-val-anderles {
        color: var(--permaweiss);
        font-size: 2.25cqi;
        font-weight: bold;
    }

    #temp-val-roemer {
        color: var(--permaweiss);
        font-size: 2.25cqi;
        font-weight: bold;
    }


/* ==========================================
       PARTNER LOGOS (Box 06) - Stufenlos & Zentriert
       ========================================== */
    #h800-box06 {
        top: 27.778%;
        left: 35.831%;
        width: 28.335%;
        height: 17.778%;
        z-index: 20;
    }

    #h800-box06 .header2026-800-content {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    /* Zwingt den Sidebar-Container, exakt den SVG-Kasten auszufüllen */
    #h800-box06 .sidebar-partner {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Überschreibt das "display: none" aus der partner-slider.css! */
    #h800-box06 .slider {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
    }

    /* Skalierung der Logos absolut stufenlos über cqi */
    /* margin: 0 auto; hält das Bild exakt in der Mitte, auch wenn JS eingreift */
    #h800-box06 .slider img.mySlides {
        width: auto !important;
        height: auto !important;
        max-width: 15cqi !important;  /* Überschreibt die starren 75% */
        max-height: 8cqi !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

  /* ==========================================
       Gruppenbuchen - alle Sprachen
       ========================================== */

    #h800-box09 .header2026-box09-text a{
        display: block !important;
        white-space: normal !important;
        max-width: 15ch !important;
        font-size: 2.1cqi !important;
        line-height: 1.7 !important;
        font-weight: 800 !important;
        color: var(--schwarz) !important;
        text-decoration: none !important;
        transition: color 0.2s ease !important;
        text-shadow: none !important;
    }

    #h800-box09 .header2026-box09-svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        fill: none;
        stroke: var(--green1);
        stroke-width: 4px;
        vector-effect: non-scaling-stroke;
    }

    #h800-box09 .header2026-box09-icon {
        width: 7.2cqi;
        height: 13cqi;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    #h800-box09 .header2026-box09-inner-icon {
        width: 55%;
        height: 55%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        stroke: #e5e5e5;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        z-index: 2;
    }

    #h800-box09 .header2026-box09-text {
        color: #fff0;
    }

     #h800-box09 .menu-fr-gruppenbuchen-container .header2026-box09-text a {
        max-width: 20ch !important;
        letter-spacing:unset !important;
    }

    .header2026-box09-lang-fr .header2026-800-content {
        left: 12% !important;
    }

    #h800-box09 .menu-es-gruppenbuchen-container .header2026-box09-text a {
        max-width: 21ch !important;
        letter-spacing:unset !important;
    }

    .header2026-box09-lang-es .header2026-800-content {
        left: 13% !important;
    }

    #h800-box09 .menu-it-gruppenbuchen-container .header2026-box09-text a {
        max-width: 21ch !important;
        letter-spacing:unset !important;
    }

    .header2026-box09-lang-it .header2026-800-content {
        left: 12% !important;
    }

    #h800-box09 .menu-sl-gruppenbuchen-container .header2026-box09-text a {
        max-width: 21ch !important;
        letter-spacing:unset !important;
    }

    .header2026-box09-lang-sl .header2026-800-content {
        left: 12% !important;
    }

    #h800-box09 .menu-hu-gruppenbuchen-container .header2026-box09-text a {
        max-width: 18ch !important;
        letter-spacing:unset !important;
    }

    .header2026-box09-lang-hu .header2026-800-content {
        left: 9% !important;
    }

    #h800-box09 .menu-nl-gruppenbuchen-container .header2026-box09-text a {
        max-width: 21ch !important;
        letter-spacing:unset !important;
    }

    .header2026-box09-lang-nl .header2026-800-content {
        left: 13% !important;
    }

    #h800-box09 .menu-pl_gruppenbuchen-container .header2026-box09-text a {
        max-width: 21ch !important;
        letter-spacing:unset !important;
    }

    .header2026-box09-lang-pl .header2026-800-content {
        left: 13% !important;
    }

    #h800-box09 .menu-sk-gruppenbuchen-container .header2026-box09-text a {
        max-width: 22ch !important;
        word-break: break-all;
        hyphens: auto;
        -webkit-hyphens: auto;
        letter-spacing: unset !important;
    }

    .header2026-box09-lang-sk .header2026-800-content {
        left: 12% !important;
    }

    #h800-box09 .menu-cs-gruppenbuchen-container .header2026-box09-text a {
        max-width: 22ch !important;
        word-break: break-all;
        hyphens: auto;
        -webkit-hyphens: auto;
    }

    .header2026-box09-lang-cs .header2026-800-content {
        left: 12% !important;
    }

  /* ==========================================
       SLOGAN - alle Sprachen
       ========================================== */

    #h800-box05 .header2026-box05-icon {
        width: 6cqi;
        height: 6cqi;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    #h800-box05 .header2026-box05-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2.8cqi;
        width: 100%;
        margin-top: 0.5cqi;
    }

    #h800-box05 .header2026-800-slogan-sub {
        font-size: 2.5cqi;
        color: var(--grau2);
        margin-top: -0.9cqi;
        line-height:5.2cqi;
    }


    #h800-box05 .header2026-800-slogan-hl {
        font-size: 3cqi !important;
        line-height:2cqi;
    }

}

@media (max-width:501){
	.header2026-800-wrapper { display: none ; }
}


/* --- File: anderles-header400 --- */
/* =========================================================================
   HEADER 400 - FINAL RESPONSIVE LAYOUT (Bis 500px)
   ========================================================================= */

@media (min-width: 501px) {
    .header2026-400-wrapper {
        display: none;
    }
}

@media (max-width: 500px) {

    .header2026-400-wrapper {
		font-family: "Open Sans", sans-serif;
        display: flex !important;
        flex-direction: column !important;
        width: 100%;
        max-width: 500px;
        margin: 0 auto 15cqi auto;
        position: relative;
        box-sizing: border-box;
        container-type: inline-size;
    }

    /* ==========================================
       1. TOPBAR (Sprachauswahl & Darkmode)
       ========================================== */
    .header2026-400-topbar {
        position: absolute;
        top: 1.1cqi;
        left: 1.1cqi;
        width: 97.8cqi;
        height: 11.25cqi;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0;
        box-sizing: border-box;
        z-index: 50;
        gap: 1.6cqi;
    }

    .header2026-400-topbar > div {
        flex: 1;
        height: 100%;
        background-color: var(--hintergrund);
        border: 1.5px solid var(--green2);
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        position: relative;
        gap:3cqi;
    }

	.menu-lang-menu-2,
	.lang-menu-item a,
	.lang-menu-item span
	{
	height: 8cqi !important;
    width: auto !important;
	}

    /* ==========================================
       SPRACHAUSWAHL ON HOVER
       ========================================== */
    .header2026-400-lang-box {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }



    .header2026-400-lang-box .header2026-box14-flag,
    .header2026-400-lang-box .lang-menu-item img {
        height: 8cqi !important;
        width: auto !important;
        aspect-ratio: 1.464 !important;
        box-sizing: border-box;
        border: 0.12cqi solid var(--permaweiss) !important;
        border-radius: 0 !important;
        background-color: var(--permaweiss);
        display: block !important;
        object-fit: cover !important;
        cursor: pointer;
        margin: 0 auto;
    }

    .header2026-400-lang-box ul {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .header2026-400-lang-box li {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header2026-400-lang-box .sub-menu {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 1.5cqi !important;
        background: rgba(0, 0, 0, 0.92) !important;
        border: 1.5px solid var(--green2) !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        min-width: 48cqi !important;
        max-width: 92cqi !important;
        z-index: 100;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
        height: max-content !important;
        padding: 5cqi 2cqi !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 7cqi 4cqi !important;
    }

    .header2026-400-lang-box:hover .sub-menu,
    .header2026-400-lang-box li:hover > .sub-menu {
        display: grid !important;
    }

    .header2026-400-lang-box .sub-menu a {
        padding: 0 !important;
        margin: 0 !important;
        transition: transform 0.2s ease, border-color 0.2s ease;
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .header2026-400-lang-box .sub-menu img {
        height: 8cqi !important;
        width: auto !important;
        aspect-ratio: 1.464 !important;
        border: 1px solid var(--permaweiss) !important;
        display: block !important;
        max-width: 50cqi !important;
        display: block !important;
        margin: 0 auto !important;
    }

    .header2026-400-lang-box .sub-menu a:hover img {
        border-color: var(--green2) !important;
        transform: scale(1.1);
    }

    /* ==========================================
       DARKMODE SCHALTER
       ========================================== */
    .header2026-400-dark-body {
        position: relative;
        display: inline-block;
        width: 17cqi;
        height: 8cqi;
        background-color: #ccc;
        cursor: pointer;
        transition: all 0.4s ease;
        clip-path: polygon(15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%) !important;
        border-radius: 0;
    }

    .checkbox_dark {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 10;
    }

    .header2026-400-dark-knob {
        position: absolute;
        top: 0.5cqi;
        left: 0.7cqi;
        width: 8cqi;
        height: 7cqi;
        background-color: var(--green2);
        clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
    }

    .header2026-400-dark-body.switch-on { 
        background-color: var(--orange1); 
    }

    .header2026-400-dark-body.switch-on .header2026-400-dark-knob { 
        transform: translateX(7.7cqi);
    }

    /* ==========================================
       2. DIE FLUIDE BÜHNE
       ========================================== */
    .header2026-400-stage {
        position: relative;
        width: 100%;
        height: 107.8cqi;
        margin: 0 auto;
    }

    .header2026-400-abs-box {
        position: absolute;
        display: block;
        text-decoration: none;
    }

    .h400-svg-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
        overflow: visible;
    }

    /* ==========================================
       3. BURGER MENÜ (Einheitlicher SVG-Rahmen)
       ========================================== */
    #h400-box-menu {
        position: absolute;
        top: 13.95cqi;
        left: 1.1cqi;
        width: 97.8cqi;
        height: 11.25cqi;
        z-index: 45;
        box-sizing: border-box;
        overflow: visible !important;
        background: transparent !important;
        border: none !important;
    }

    /* Das Hintergrund-SVG wiederherstellen und voll aufspannen */
    #h400-box-menu > svg.h400-svg-bg {
        display: block !important;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        overflow: visible;
    }

    /* Erzwingt die einheitliche Darstellung des Polygons */
    #h400-box-menu > svg.h400-svg-bg polygon {
        display: block !important;
        fill: var(--hintergrund) !important;
        stroke: var(--green2) !important;
        stroke-width: 1.5 !important;
        vector-effect: non-scaling-stroke !important;
    }

    .header2026-400-burger-btn {
        width: 100%;
        height: 100%;
        cursor: pointer;
        display: flex;
        align-items: center;
        position: relative;
        background: transparent !important;
        z-index: 5; /* Wichtig: Button MUSS über dem SVG liegen */
    }
    
    .h400-burger-inner {
        position: relative;
        z-index: 2;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 4cqi;
        box-sizing: border-box;
    }
    
    .h400-burger-icon {
        width: 9.5cqi;
        height: 9.5cqi;
        stroke: var(--permaweiss) !important;
        stroke-width: 2.5;
        fill: none;
        display: block !important;
        flex-shrink: 0;
    }

	/* Temperatur-Wrapper: Ausrichtung und Abstand */
    .h400-temp-wrap { 
        display: flex !important; 
        align-items: center !important; 
        justify-content: center !important;
        gap: 1.2cqi !important; 
        font-size: 3.4cqi !important; 
        font-weight: bold; 
        color: var(--permaweiss); 
        height: 100%;
    }

    /* Thermometer-Icon: Spürbar vergrößert */
    .tempimg { 
        height: 8cqi !important;       /* Nutzt die Boxhöhe von 11.25cqi fast komplett aus */
        width: 3.8cqi !important;      /* Genug Breite, damit das Bild nicht eingequetscht wird */
        background-size: 7cqi !important; 
        background-repeat: no-repeat !important;
        background-position: center !important;
        display: inline-block !important;
        flex-shrink: 0;
		margin-top: 2cqi !important;
        margin-right: 0 !important;
    }

    .header2026-400-burger-dropdown {
        position: absolute; 
        top: 100%; 
        left: 50%; 
        transform: translateX(-50%);
        background: var(--hintergrund); 
        border: 2px solid var(--green2);
        display: flex; 
        flex-direction: column; 
        width: 100%;
        opacity: 0; 
        visibility: hidden; 
        transition: all 0.2s ease; 
        z-index: 60;
        margin-top: 1.5cqi;
    }

    .header2026-400-burger-dropdown a {
        padding: 2.2cqi; 
        color: var(--schwarz);
        text-decoration: none; 
        font-size: 5.6cqi;
        border-bottom: 1px solid var(--green2); 
        text-align: center; 
        font-weight: bold;
    }

    .header2026-400-burger-dropdown a:hover {
        color: var(--orange2);
    }

    #burger-toggle-400:checked ~ .header2026-400-burger-dropdown { 
        opacity: 1; 
        visibility: visible; 
    }

    .h400-tv-link { 
        display: flex !important; 
        align-items: center; 
        justify-content: center; 
        gap: 2cqi; 
        background: rgba(0, 200, 83, 0.15); 
    }

    .h400-tv-link img { 
        height: 4.5cqi; 
    }

    /* ==========================================
       4. LOGO & WABEN (Um 13.8cqi nach unten versetzt)
       ========================================== */
    #h400-box13 {
        width: 26cqi;
        aspect-ratio: 278.282 / 241;
        left: 37cqi;
        top: 39.2cqi; /* 25.4 + 13.8 */
        z-index: 30;
    }

    #h400-box11 {
        width: 47.5cqi;
        aspect-ratio: 357.958 / 310;
        left: 1.5cqi;
        top: 53.8cqi; /* 40 + 13.8 */
        z-index: 25;
    }

    #h400-box12 {
        width: 47.5cqi;
        aspect-ratio: 357.958 / 310;
        left: 51cqi;
        top: 53.8cqi; /* 40 + 13.8 */
        z-index: 25;
    }

    #h400-box09 {
        top: 96.8cqi; /* 83 + 13.8 */
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2cqi;
        z-index: 35;
    }

    #h400-box09 .header2026-box09-icon { width: 7cqi; height: 7cqi; position: relative; }
    #h400-box09 .header2026-box09-svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--green1); stroke-width: 3px; }
    #h400-box09 .header2026-box09-inner-icon { width: 55%; height: 55%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); stroke: #e5e5e5; fill: none; stroke-width: 2; }
    #h400-box09 .header2026-box09-text a { font-size: 4.3cqi !important; font-weight: 800 !important; color: var(--schwarz) !important; text-decoration: none; line-height: 1.4; display: block; text-align: center; width: 54cqi; text-shadow: none !important;}

	.header2026-400-slogan-row {
		position: relative;
		width: 100%;
		left: 0;
		margin: 5.8cqi 0 4cqi 0; 
		height: 26cqi; /* Doppelt so hoch wie zuvor */
		z-index: 20;
		box-sizing: border-box;
	}

    .h400-slogan-inner { position: relative; z-index: 2; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
    .header2026-box05-row { display: flex; align-items: center; justify-content: center; gap: 2cqi; width: 100%; }
    .header2026-box05-icon { width: 5cqi; height: 5cqi; position: relative; }
    .header2026-box05-svg { width: 100%; height: 100%; fill: none; stroke: var(--green1); stroke-width: 3px; }
    .header2026-box05-inner-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 55%; height: 55%; stroke: #e5e5e5; fill: none; stroke-width: 2; }
    .header2026-400-slogan-hl { font-size: 3.5cqi !important; font-weight: bold; text-transform: uppercase; line-height: 1.2; }
    .header2026-400-slogan-sub { font-size: 2.4cqi !important; color: var(--grau2); margin-top: 0.3cqi; }

    /* ==========================================
       5. SOCIAL MEDIA KRONE & ICONS
       ========================================== */
    #h400-box08 {
        position: absolute;
        top: 13.8cqi; /* Verschiebt das gesamte Gefüge um 13.8cqi nach unten */
        left: 0;
        width: 100cqi;
        height: 94cqi;
        z-index: 21;
        pointer-events: none !important;
    }

    #h400-box08 .h400-svg-bg { 
        width: 100%; 
        height: 100%; 
        display: block; 
        pointer-events: visiblePainted !important; 
    }

    .h400-social-inner {
        position: absolute;
        top: 19cqi; 
        left: 0;
        width: 100cqi;
        height: 16cqi;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: auto;
        box-sizing: border-box;
        z-index: 40;
    }

    .h400-social-col.h400-col-left { 
        width: 100%; 
        height: 100%; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
    }
    
    .h400-social-col.h400-col-right { 
        display: none; 
    }

    .sozial_menu,
    .sozial_menu ul {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .sozial_menu ul li { 
        width: 12cqi !important;
        height: 12cqi !important;
        display: flex !important; 
        align-items: center !important; 
        justify-content: center !important; 
        margin: 0 !important; 
    }
    
    .sozial_menu ul li a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        transition: transform 0.3s ease !important;
    }

    .sozial_menu ul li a:hover { 
        transform: scale(0.85) !important; 
    }

    .sozial_menu ul li:nth-child(1) { margin-right: 5.5cqi !important; }
    .sozial_menu ul li:nth-child(2) { margin-right: 31cqi !important; }
    .sozial_menu ul li:nth-child(3) { margin-right: 5.5cqi !important; }

    .h400-follow-bubble {
        position: absolute;
        left: 50%;
        top: -4.4cqi;
        transform: translateX(-50%);
        background-color: var(--permagreen2);
        color: var(--permaweiss);
        font-size: 3.4cqi;
        font-weight: bold;
        padding: 0.8cqi 4.5cqi; 
        border-radius: 2.8cqi;
        white-space: nowrap;
        z-index: 45;
        line-height: 6.5cqi !important;
    }

    /* Fallback für alte HTML-Klassen */
    .h400-social-left { display: flex; align-items: center; justify-content: center; width: 100%; }
    .h400-social-right, .h400-follow-center { display: none !important; }

	body.dark-theme #h400-box08 .h400-follow-bubble {
	  filter: 
		drop-shadow(2px 0 0 var(--permaweiss)) 
		drop-shadow(-2px 0 0 var(--permaweiss)) 
		drop-shadow(0 2px 0 var(--permaweiss)) 
		drop-shadow(0 -2px 0 var(--permaweiss)) !important;
	}

    /* ==========================================
       6. HOVER EFFEKTE HAUSWABEN
       ========================================== */
    #h400-box11:hover svg > polygon, 
    #h400-box12:hover svg > polygon,
    #h400-box09:hover svg.h400-svg-bg > polygon { stroke: var(--orange2); }
    #h400-box11:hover svg rect, #h400-box11:hover svg text,
    #h400-box12:hover svg rect, #h400-box12:hover svg text { opacity: 0; }
    #h400-box11 svg rect, #h400-box11 svg text,
    #h400-box12 svg rect, #h400-box12 svg text { transition: opacity 0.3s ease; }

    /* ==========================================
        7. Anpassungen Boxen
    ========================================== */

    .header2026-box05-icon {
        width: 11cqi !important;
        height: 11cqi!important;
    }

    .header2026-400-slogan-hl {
        font-size: 5.3cqi !important;
        word-break: break-word !important;
        hyphens: unset !important;
        width: 66cqi !important;
        color: var(--schwarz) !important;
    }

    .header2026-400-slogan-hl span {
        line-height: 0.9 !important;
    }

    .header2026-400-slogan-sub {
        font-size: 3.4cqi !important;
        max-width: 90cqi !important;
        line-height: 1.4 !important;
        color: var(--schwarz) !important;
        margin-top: 2cqi !important;
    }

    .header2026-400-slogan-hl span::before {
        content: "\A";
        white-space: pre;
    }


    .header2026-box05-lang-es .header2026-400-slogan-hl span::before,
    .header2026-box05-lang-fr .header2026-400-slogan-hl span::before,
    .header2026-box05-lang-it .header2026-400-slogan-hl span::before{
        content: none;
    }

     #h400-box09 .header2026-box09-icon {
        width: 11cqi !important;
        height: 11cqi !important;

     }

     #h400-box09:hover .header2026-box09-icon,
     #h400-box09:hover .header2026-box09-text a {
        transform: scale(0.85) !important;
     }

     #h400-box09-content {
        position: absolute;
        bottom: -2.3cqi;
        left: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5cqi;
        pointer-events: auto;
        z-index: 25;
    }

    .header2026-box09-text {
        color: #fff0 !important;
    }

    .menu-cs-gruppenbuchen-container .header2026-box09-text a {
        word-break: break-word !important;
        hyphens: auto;
    }

    #temp-val-anderles-400 {
        margin-left: 2cqi !important;
        color: var(--permaweiss) !important;
    }

    #temp-val-roemer-400 {
        margin-right: 2cqi !important;
        color: var(--permaweiss) !important;
    }

    .h400-darkmode-icon {
        height: 11cqi;
    }

        /* ==========================================
    NUR DIE NEUEN CODES FÜR:
    GRID, HÖHE, AUSBLENDEN & ZENTRIERUNG
    ========================================== */



    /* 4. Die strikte Zentrierung (Grid-Zelle) */
    .header2026-400-lang-box .sub-menu li {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }


    /* ==========================================
    SVG HOVER- & KLICK-KORREKTUR (Exakt wie im 800px Raster)
    ========================================== */

    /* 1. Die unsichtbaren HTML-Rechtecke komplett durchlässig machen */
    .header2026-400-abs-box {
        pointer-events: none !important;
    }

    /* WICHTIG: Überschreibt den Fehler aus deiner alten header400.css für Box 08,
    der die Social-Media-Box unsichtbar über alles gelegt hat */
    #h400-box08 .h400-svg-bg {
        pointer-events: none !important;
    }

    /* 2. Klicks & Hover NUR auf die bemalten Elemente (Polygone, Bilder, Text) beschränken */
    .h400-svg-bg polygon,
    .h400-svg-bg image,
    .h400-svg-bg rect,
    .h400-svg-bg text {
        pointer-events: visiblePainted !important;
        cursor: pointer;
    }

    /* 3. Alle HTML-Inhalte (Gruppen-Text, Social-Icons, Burger-Menü) wieder klickbar machen */
    #h400-box09-content,
    #h400-box09-content *,
    .h400-social-inner,
    .h400-social-inner *,
    .header2026-400-burger-btn,
    .header2026-400-burger-btn *,
    .header2026-400-burger-dropdown,
    .header2026-400-topbar * {
        pointer-events: auto !important;
    }

    /* 4. Link-Klickbereich in Box 09 künstlich stark vergrößern, OHNE dein Layout zu verschieben! */
    #h400-box09 .header2026-box09-text a {
        padding: 4cqi 10cqi !important;
        margin: -4cqi -10cqi !important;
        position: relative;
        z-index: 10;
    }


}


/* --- File: anderles-menu --- */
body {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  overflow-x:hidden;
  color: #ababab; }

::-webkit-scrollbar {
    width: 10px;
    background-color: #F5F5F5;

}

img {
    float: auto;
    border:medium none;
    margin:0 10px 10px 0;
    max-width:100%;
    outline: medium none;
}

.hexagon-item img{
    -webkit-filter: grayscale(100);
    filter: grayscale(100);
}

.hexagon-item:hover img{
    -webkit-filter: grayscale(0);
    filter: grayscale(0);  
}

::-webkit-scrollbar-thumb {
    background-color: var(--green1);
    
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: lightgray;
}

.heading-page
{
    text-transform: uppercase;
    font-size: 43px;
    font-weight: bolder;
    letter-spacing: 3px;
    color: white;
}
a {
  color: inherit;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  text-decoration: none;
  }
  
  a:hover, a:focus {
    color: #ababab;
    text-decoration: none;
    outline: 0 none; }


.btn {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s; }
  .btn:hover, .btn:focus, .btn:active:focus {
    outline: 0 none; }

.btn-primary {
  background-color: #FA6862;
  border: 0;
  font-weight: 700;
  height: 48px;
  line-height: 50px;
  padding: 0 42px;
  text-transform: uppercase; }
  .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:active:focus {
    background-color: #f9423a; }

.btn-border {
  border: 1px solid #d7d8db;
  display: inline-block;
  padding: 7px; }

/*
 *  CSS Helper Class
 */
.clear:before, .clear:after {
  content: " ";
  display: table; }

.clear:after {
  clear: both; }
steinbock
.pt-table {
  display: table;
  width: 100%;
  height: -webkit-calc(100vh - 4px);
  height: -moz-calc(100vh - 4px);
  height: calc(100vh - 4px); }

.pt-tablecell {
  display: table-cell;
  vertical-align: middle; }

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

.relative {      background-color: var(--green1);
  position: relative; }

.primary,
.link:hover {
  color: #FA6862; }

.no-gutter {
  margin-left: 0;
  margin-right: 0; }
  .no-gutter > [class^="col-"] {
    padding-left: 0;
    padding-right: 0; }

.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }

.flex-middle {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center; }

.space-between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between; }

.nicescroll-cursors {
  background: #FA6862 !important; }

.preloader {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }
  .preloader.active.hidden {
    display: none; }

.loading-mask {-1px -1px 0 var(--schwarz), 1px -1px 0 var(--schwarz), -1px 1px 0 var(--schwarz), 1px 1px 0 var(--schwarz)
  background-color: #FA6862;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 20%;
  -webkit-transition: all 0.6s cubic-bezier(0.61, 0, 0.6, 1) 0s;
  -moz-transition: all 0.6s cubic-bezier(0.61, 0, 0.6, 1) 0s;
  -o-transition: all 0.6s cubic-bezier(0.61, 0, 0.6, 1) 0s;
  transition: all 0.6s cubic-bezier(0.61, 0, 0.6, 1) 0s; }
  .loading-mask:nth-child(2) {
    left: 20%;
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    transition-delay: 0.1s; }
  .loading-mask:nth-child(3) {
    left: 40%;
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s; }
  .loading-mask:nth-child(4) {
    left: 60%;
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    transition-delay: 0.3s; }
  .loading-mask:nth-child(5) {
    left: 80%;
    -webkit-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    transition-delay: 0.4s; }

.preloader.active.done {
  z-index: 0; }

.preloader.active .loading-mask {
  width: 0; }

/*------------------------------------------------
	Start Styling
-------------------------------------------------*/
.mt20{margin-top:20px;}
.site-wrapper {
  /*border-top: 4px solid #ff0037;*/ }

.page-close {
  font-size: 30px;
  position: absolute;
  right: 30px;
  top: 30px;
  z-index: 100; }

.page-title {
  margin-bottom: 75px; }
  .page-title img {
    margin-bottom: 20px; }
  .page-title h2 {
    font-size: 68px;
    margin-bottom: 25px;
    position: relative;
    z-index: 0;
    font-weight: 900;
    text-transform: uppercase; }
  .page-title p {
    font-size: 16px; }
  .page-title .title-bg {
    color: rgba(30, 37, 48, 0.07);
    font-size: 158px;
    left: 0;
    letter-spacing: 10px;
    line-height: 0.7;
    position: absolute;
    right: 0;
    top: 50%;
    z-index: -1;
    -webkit-transform:root {


}: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%); }

.section-title {
  margin-bottom: 20px; }
  .section-title h3 {
    display: inline-block;
    position: relative; }
    .section-title h3::before, .section-title h3::after {
      content: "";
      height: 2px;
      position: absolute;
      bottom: 8px;
      left: -webkit-calc(100% + 14px);
      left: -moz-calc(100% + 14px);
      left: calc(100% + 14px); }
    .section-title h3::before {
      background-color: #1e2530;
      width: 96px;
      bottom: 14px; }
    .section-title h3::after {-1px -1px 0 var(--schwarz), 1px -1px 0 var(--schwarz), -1px 1px 0 var(--schwarz), 1px 1px 0 var(--schwarz)
      background-color: #FA6862;
      width: 73px; }
  .section-title.light h3 {
    color: #fff; }
    .section-title.light h3::before {
      background-color: #fff; }

.page-nav {
  bottom: 40px;
  left: 0;
  position: absolute;
  right: 0; }
  .page-nav span {
    font-size: 14px;
    font-weight: 500;
    line-height: 0.9;
    text-transform: uppercase; }

.col-lg-8 {
    width: fit-content;
    margin: auto;
}


/*------------------------------------------------
    Navigation - Primary Menu
-------------------------------------------------*/
.navigation-menu {
    margin-bottom: 120px;
}

[id$="mainmenu"] {
  display: flex;
  width: fit-content;
  margin: 10px auto auto auto;
  padding-left: 90px;
}

.navigation-menu ul:after {
    clear: both;
}

[id$="mainmenu"] li {
  cursor: pointer;
  width: 200px;
  height: 173.20508px;
  list-style-type: none;

  margin-left: -60px;
  margin-right: 30px;
  z-index: 0;
  position: relative;
}

[id$="mainmenu"] li:hover {
    z-index: 1;
}
[id$="mainmenu"] li:hover .hex-item:last-child {
    opacity: 1;
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
}
[id$="mainmenu"] li:hover .hex-item:first-child {
    opacity: 1;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}
[id$="mainmenu"] li:hover .hex-item:first-child div:before,
[id$="mainmenu"] li:hover .hex-item:first-child div:after {
    height: 5px;
}
[id$="mainmenu"] li:hover .hex-item div::before,
[id$="mainmenu"] li:hover .hex-item div::after,
[id$="mainmenu"] li.current_page_item .hex-item div::after,
[id$="mainmenu"] li.current_page_item .hex-item div::before {
    background-color: var(--orange1);
}
[id$="mainmenu"] li:hover{
    -webkit-transform: scale(0.97);
    -moz-transform: scale(0.97);
    -ms-transform: scale(0.97);
    -o-transform: scale(0.97);
    transform: scale(0.97);
}

.navigation-menu ul li:nth-last-child(2), .navigation-menu ul li:nth-last-child(4),
.navigation-menu ul li:nth-last-child(2):hover, .navigation-menu ul li:nth-last-child(4):hover{
    -webkit-transform: translate(0%, 50%) !important;
    -moz-transform: translate(0%, 50%) !important;
    -ms-transform: translate(0%, 50%) !important;
    -o-transform: translate(0%, 50%) !important;
    transform: translate(0%, 50%) !important;
}

.hex-item {
    position: absolute;
    top: 0;
    left: 50px;
    width: 100px;
    height: 173.20508px;
}
.hex-item:first-child {
    z-index: 0;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.hex-item:last-child {
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 1;
}
.hex-item div {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    width: 100px;
    height: 173.20508px;
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
}
.hex-item div::before, .hex-item div::after {
    background-color: var(--green2);
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
    -moz-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
    -o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}
.hex-item div:before {
    top: 0;
}
.hex-item div:after {
    bottom: 0;
}
.hex-item div:nth-child(1) {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
.hex-item div:nth-child(2) {
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
}
.hex-item div:nth-child(3) {
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    transform: rotate(120deg);
}

.menu-item a {
    display: table-cell;
    width:inherit;
    height:inherit;
    vertical-align: middle;
    font-size: 22px;
    letter-spacing: 1px;
    line-height: 24px;
    opacity: 1;
    font-weight: 600 !important;
    color: var(--permaweiss);
    text-shadow: -1px -1px 0 var(--permaschwarz), 1px -1px 0 var(--permaschwarz), -1px 1px 0 var(--permaschwarz), 1px 1px 0 var(--permaschwarz);
    text-align: center;
}

.menu-item a:hover{
  color: rgba(0, 0, 0, 0);
  text-decoration: none;
  outline: 0 none;
  text-shadow: none;
}

/*------------------------------------------------
    END Navigation
-------------------------------------------------*/







/* --- File: anderles-mobile-menu --- */

nav.mobile_menu{
	display:none;
}

@media screen and (max-width : 1129px){ /*MOBIL für MENÜ*/
    /*Make dropdown links appear inline*/
	.navigation-menu {
		display: none;
	}	

	nav.mobile_menu{
		display:block;
	}


[id$="-mobile-menu"] li:first-child{
    max-width: auto;
    background: linear-gradient(var(--green1), var(--green2)); /* Green */

}
[id$="-mobile-menu"] li.current > a,
[id$="-mobile-menu"] li ul li.current > a {
    background: linear-gradient(var(--orange1), var(--orange2)); /* Orange*/
    color: var(--weiss);
}
ul[id$="-mobile-menu"]:last-child{
    border-right: none;
}
/*Strip the ul of padding and list styling*/
ul[id$="-mobile-menu"]  {
    list-style-type:none;
    margin:0;
    padding:0;
    position: relative;
    float: left;
    z-index: 50;
}
/*Create a horizontal list with spacing*/
[id$="-mobile-menu"] li {
    display: block;
    border-right: 1px solid #e8daba;

}
/*Style for menu links*/
[id$="-mobile-menu"] li a {
    display: block;
	font-size:16px;
    font-style: normal;
    text-align: center;
    line-height: 40px;
    padding: 0px 20px;
    color: var(--weiss);
    background: linear-gradient(var(--green1), var(--green2));
    text-decoration: none;
	text-shadow: none;
}
/*Hover state for top level links*/
[id$="-mobile-menu"] li:hover a {
    background: linear-gradient(var(--orange1), var(--orange2));
    color: var(--weiss);
}
/*Style for dropdown links*/
[id$="-mobile-menu"] li:hover ul a {
    background: linear-gradient(var(--green1), var(--green2));
    color: var(--weiss);
    line-height: 40px;
}
/*Hover state for dropdown links*/
[id$="-mobile-menu"] li:hover ul a:hover {
    background: linear-gradient(var(--orange1), var(--orange2));
    color: var(--weiss);
}
/*Hide dropdown links until they are needed*/
[id$="-mobile-menu"] li ul {
    display: none;
	position: absolute;
}
/*Make dropdown links vertical*/
[id$="-mobile-menu"] li ul li {
    display: block;
    float: none;
}
/*Prevent text wrapping*/
[id$="-mobile-menu"] li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
}
/*Display the dropdown on hover*/
ul[id$="-mobile-menu"] li a:hover + #hidden, #hidden:hover {
    display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
    text-decoration: none;
    color: var(--weiss);
    background: linear-gradient(var(--green1), var(--green2));
    text-align: center;
    padding: 10px 0px 0px 0px;
    display: none;
}

	.show-menu {
        display:block;
    }


   ul[id$="-mobile-menu"]{
        position: static;
        display: none;
    }
    /*Create vertical spacing*/
    [id$="-mobile-menu"] li {
        margin-bottom: 1px;
    }
    [id$="-mobile-menu"] li ul {
        display: inline-block;
	    position: relative;
        width: 100%;
    }
    /*Make all menu links full width*/
    ul[id$="-mobile-menu"] li, [id$="-mobile-menu"] li a {
        width: 100%;
        margin-bottom: 1px;
        position: static;
        padding: 0px;
    }
    /*Display 'show menu' link*/

	nav.mobile_menu {
		text-align:center;
	}

/* Hidden checkbox to triger mobile nav*/
    .mobile_menu input#show-menu{
		display: none;
	}

/*Styling of the linked label element*/
	nav.mobile_menu img{
		height:35px;
		width:35px;
		cursor:pointer;
		}


/*Show menu when invisible checkbox is checked*/
	input[type=checkbox]:checked ~ div ul[id$="-mobile-menu"]{
		display: contents !important;
	}
}



/* --- File: anderles-widget-cards --- */
.card {
  width: 230px;
  border-radius: 0px !important;
  padding: 1.5rem;
  position: relative;
  transform: skew(-9deg,0deg);
  transition: 0.4s ease-out;
  float: left;
  margin-left:-36px;
}
.ak_entry{
  float: left;
}
.card:hover:before {
  opacity: 1;
  transform:skew(-9deg,0deg);
  margin-left: 18px;
  height: 95%;
  width: 87%;
  border-radius: unset;
}
.card:hover .info {
  opacity: 1;
  transform: skew(-9deg,0deg);
  /*transform: translateY(0px);*/
}
.card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: unset;
  background: rgba(0, 0, 0, 0.6);
  transform: skew(-9deg,0deg);
  z-index: 2;
  transition: 0.5s;
  opacity: 0;
}
.card img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0px !important;
}
.card .info {
  position: relative;
  z-index: 3;
  color: white;
  opacity: 0;
  transform: translateY(-80px);
  transition: 0.5s;
  padding-left: 5px;
}
.card .info h1 {
  margin: 0px;
}
.card .info p {
  color: var(--permaweiss);
  letter-spacing: 1px;
  font-size: 15px;
  margin-top: 8px;
}
.card .info button {
  padding: 0.6rem;
  outline: none;
  border: none;
  border-radius: 3px;
  background: white;
  color: black;
  font-weight: bold;
  cursor: pointer;
  transition: 0.4s ease;
}
.card .info button:hover {
  background: dodgerblue;
  color: white;
}


@media screen and (min-width : 1745px){
	.ausflug {
		margin-left: calc(50% - 605px);
	}
	.splitter1, .splitter2,.splitter3, .splitter4{
		display: none;
	}

}


@media screen and (min-width: 1399px) and (max-width : 1744px){
	.ausflug {
		margin-left: calc(50% - 484px);
	}
	.splitter1, .splitter2,.splitter3, .splitter4{
		display: none;
	}
}

@media screen and (min-width: 1130px) and (max-width : 1398px){
	.ausflug {
		margin-left: calc(50% - 363px);
	}
	.splitter1, .splitter2, .splitter4{
		display: none;
	}
}

@media screen and (min-width: 1092px) and (max-width : 1129px){
	.ausflug {
		margin-left: calc(50% - 363px);
	}
	.splitter1, .splitter2, .splitter4{
		display: none;
	}
}

@media screen and (min-width: 840px) and (max-width : 1091px){
	.ausflug {
		margin-left: calc(50% - 363px);
	}
	.splitter1, .splitter2,.splitter4{
		display: none;
	}
}

@media screen and (min-width: 600px) and (max-width : 839px){
	.ausflug {
		margin-left: calc(50% - 242px);
	}
	.splitter1, .splitter3{
		display: none;
	}
}

@media screen and  (max-width : 599px){
	.ausflug {
		margin-left: calc(50% - 105px);
	}

}



/* --- File: anderles-booking --- */
button, #anfrage_button{
    background: linear-gradient(var(--orange1), var(--orange2)); /* Orange */
    color: var(--permaschwarz);
    padding: 7px 15px;
  	margin-top:10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
  	border: none;
} 
button:hover{
    background: linear-gradient(var(--orange2), var(--orange1)); /* Green */
    color: var(--permaschwarz);
}

#kott{
	display: none !important;
}

.your-name input, .your-email input, .your-subject input{
	font-size: 14px;
	padding: 7px;
    max-width:95%;
}

.your-nachricht textarea, .your-message textarea  {
	font-size: 14px;
	padding: 7px;
	width: 380px;
    max-width:95%;
}

.suchdiv input[type="date"], contactdiv input[type="date"], .anfragen input[type="date"]{
   background:var(--permaweiss) url(/wp-content/uploads/anderles/icons/planner.webp)  85% 50% no-repeat ;
   color: var(--green1);
   padding: 7px 7px;
   margin-right: 10px;
   text-align: left;
   text-decoration: none;
   display: inline-block;
   font-size: 14px;
   border: 1px solid var(--weiss);
   border-radius: 3px;
   width: 205px;
}

.suchdiv, .suchdiv_home, .contactdiv {
  background: linear-gradient(var(--green1), var(--green2));
  border-radius: 0px;
  padding: 5px 30px 5px 30px;
  margin:0px;
  display: block;
}
.suchdiv form{
   text-align: center; 
}
.suchdiv label, .suchdiv_home label, .contactdiv label{
  display:block;
  color: var(--permaweiss);
  font-size:16px;
}
.suchdiv .holder, .suchdiv_home .holder, .contactdiv .holder{
  display:inline-block;
  margin-right: 20px;
  margin-top:0px;
  vertical-align:40px;
}
.suchdiv select, .suchdiv select, .personen select, .haus select, .Hausauswahl select, .teilnehmer select{
	background:var(--permaweiss);
	color: var(--green1);
	padding: 7px 7px 7px 7px;
	margin-right: 10px;
	text-align: left;
	text-decoration: none;
	display: inline-block;
	font-size: 14px;
	border: 1px solid var(--weiss);
	border-radius: 3px;
	width: 221px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image:url(/wp-content/uploads/anderles/icons/arrow_down.webp);
	background-position: 97% 50%;
	background-repeat: no-repeat;
}
.suchdiv_home select{
	/*background:var(--weiss);*/
	color: var(--green1);
	padding: 7px 7px 7px 7px;
	margin-right: 10px;
	text-align: left;
	text-decoration: none;
	display: inline-block;
	font-size: 14px;
	border: 1px solid var(--weiss);
	border-radius: 3px;
	font-weight: bold;
	width: 191px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image:url(/wp-content/uploads/anderles/icons/arrow_down.webp);
	background-position: 97% 50%;
	background-repeat: no-repeat;
}

.suchdiv button, .suchdiv_home button,.contactdiv button, #anfrage_button{
  width: 221px;
  padding: 15px;
  font-size: 16px;
  border-radius: 3px;
}.hover
.suchdiv button:hover, .suchdiv_home button:hover, .contactdiv button:hover, #anfrage_button:hover{
  background: linear-gradient(var(--orange2), var(--orange1));
  color: var(--permaschwarz);
  border-radius: 3px;
}
.suchdiv input[type="submit"]:hover, .suchdiv_home input[type="submit"]:hover, .contactdiv input[type="submit"]:hover{
  background: linear-gradient(var(--braun2), var(--braun1));
  color: var(--permaschwarz);
  border-radius: 3px;
}

.suchdiv input[type="submit"], .suchdiv_home input[type="submit"], .contactdiv input[type="submit"]{
  background: linear-gradient(var(--braun1), var(--braun2)); /* Orange */
  color: var(--permaschwarz);
  margin-top:10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  width: 221px;
  padding: 15px;
  font-size: 16px;
  border-radius: 3px;
  border: none;
}

.suchButton{
  margin-top:11px;
  margin-right: 25px;

}

.buchButton{
	text-align: right;
}

.buchButton p{

}

.buchButton button{
	width: max-content;
}

.bookinginfo{
	max-width: 79vw;
	width: 100%;
}

.ButtonBox{
	display:inline-block;
}

#ingreen{
    color: var(--permaweiss);
	text-align: center;
}

/*Booking Smoobo Appartment Tool*/

#booking_out,
#booking_outen {
  display: grid;
}

.bookingHaus {
    display: inline-flex;
    padding: 20px;
    border: 1px solid var(--green1);
    border-radius: 7px;
    margin-bottom: 10px;
    margin-top: 10px;
	background: var(--hintergrund);
}




.bookingHaus img {
    float: left;
	width: 100%;
	height: 100%;
	object-fit: cover;
	max-width: 300px;
	max-height: 300px;
}

.bookingHaus haus {
    font-size:18px;
    line-height: 18px;
    color: var(--green1);
    font-weight: bold;
}
}

.bookingHaus .suchButton {
    display: block;
    text-align: right;
    width: 100%;
}

.bookingHaus .suchButton p {
    margin-top: 12%;
    text-align: right;
    font-size: 18px;
}

.bookingHaus .suchButton button {
  width: 191px;
  padding: 15px;
  font-size: 16px;
  border-radius: 3px;
}

.bookingHaus .suchButton button a, .bookingHaus .suchButton button a:hover {
    text-decoration: none;
    color: black;
}

.bookingHaus .suchButton button:hover{
  background: linear-gradient(var(--orange2), var(--orange1));
  color: var(--permaschwarz);
  border-radius: 3px;
}



.fehler {
    padding: 25px 0 10px 10px;
    display: block;
    color: red;
    font-size: 18pt;
    font-weight: bold;
    line-height: 20pt;
}

.smoobu_ext {
    width: 100%;
    border: none;
    height:  3305px !important;
    border: 1px solid var(--green1);
    border-radius: 10px;
    margin-top:15px;
}

iframe #check-availability-container {
    visibility: hidden !important;
}

/*Ladebalken*/
.loader {
  border: 6px solid #f3f3f3; /* Light grey */
  border-top: 6px solid var(--green1); /* Green */
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 2s linear infinite;
  margin: 15px 45% 0 45%;

}



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

@media screen and (max-width : 951px){
	.smoobu_ext {
		width: 100%;
		height:  3550px !important;
	}
	.bookingHaus img {
		max-width: 200px;
		max-height: 200px;
	}
}

@media screen and (max-width : 870px){
	.smoobu_ext {
		width: 100%;
		height:  4550px !important;
	}
	.bookingHaus img {
		max-width: 180px;
		max-height: 180px;
	}
}

@media screen and (max-width : 699px){
	.smoobu_ext {
		width: 100%;
		height:  4701px !important;
	}
	.bookingHaus img {
		max-width: 160px;
		max-height: 160px;
	}
}

@media screen and (max-width : 569px){
	.smoobu_ext {
		width: 100%;
		height:  4900px !important;
	}
	.bookingHaus img {
		max-width: 130px;
		max-height: 130px;
	}
}
@media screen and (max-width : 499px){
	.smoobu_ext {
		width: 100%;
		height:  5315px !important;
	}
	.bookingHaus img {
		display:none;
	}
}

@media screen and (max-width : 439px){
	.smoobu_ext {
		width: 100%;
		height:  5720px !important;
	}
	.bookingHaus img {
		display:none;
	}
}

@media screen and (max-width : 399px){
	.smoobu_ext {
		width: 100%;
		height:  6230px !important;
	}
	.bookingHaus {
		display:block;
	}
	.bookingHaus img {
		display:none;
	}
}
@media screen and (max-width : 340px){
	.smoobu_ext {
		width: 100%;
		height:  7000px !important;
	}
	.bookingHaus img {
		display:none;
	}
}



/* --- File: anderles-content --- */
.cmplz-accept{
	background: linear-gradient( var(--green1), var(--green2));
}

.cmplz-accept:hover{
	background: linear-gradient( var(--green2), var(--green1));
}


.videoYoutube iframe{	
  	width: 600px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.videoYoutube {
    position: relative;
    padding-bottom: 56.5%;
    height: 0;
    overflow: hidden;
}

.sidebooking {
    width: 89%;
}
   
.temp{
    display: inline;
}

.temp #infotext div:first-child{
    margin-left: 0px;
}

.temp #infotext div{
    margin-left: 30px;
}

.temp img{
    margin:0px;
    position: relative;
    top: 6px;
	width: 25px; 
}

#tv-button {
    -webkit-transform:scale(1.5);
    transform:scale(1.5);
}

/* FIX: Doppelte Semikolons entfernt, die Stylus zum Absturz bringen */
.ausspucken {
  background: linear-gradient( var(--green1), var(--green2));
  color: var(--permaweiss);
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.faqactive{
  background: linear-gradient( var(--green1), var(--green2));
  color: var(--permaweiss);
}

.faqactive:hover, .ausspucken:hover {
  background: linear-gradient(var(--green2), var(--green1));
  color: var(--permaweiss);
}

.faqcontent {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: var(--hintergrund);
  color: var(--text);
}

.ab-item img {
    max-width: 22px;
    max-height: 14px;
}

.wp-list-table th[class*="column-language_"] img,
.wp-list-table td[class*="column-language_"] img {
    width: 22px !important;
    height: auto !important;
    max-height: 15px !important;
    object-fit: contain !important;
    vertical-align: middle !important;
}

/* =========================================================
   SEITEN-MENÜ (WABEN-BUTTON) - DAS ORIGINAL DESIGN
   ========================================================= */

#sidebuchen-menu {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;

  /* FIX: Kein verschachteltes min() mehr, das Stylus crasht */
  --hex-h: clamp(230px, 38vh, 420px);
  height: var(--hex-h);

  --hex-w: calc(var(--hex-h) * 0.5);
  width: var(--hex-w);

  /* FIX: Multiplikation statt Division (1 / 3.4641 = 0.28867) */
  --slant-x: calc(var(--hex-h) * 0.28867);

  background: var(--green2);

  clip-path: polygon(
    100% 0, 
    var(--slant-x) 0, 
    0% 50%, 
    var(--slant-x) 100%, 
    100% 100%
  );
  
  box-sizing: border-box;
  cursor: pointer;
}

#sidebuchen-menu::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--orange2);
  clip-path: polygon(
    100% 0, 
    var(--slant-x) 0, 
    0% 50%, 
    var(--slant-x) 100%, 
    100% 100%,
    100% calc(100% - 3px),
    var(--slant-x) calc(100% - 3px),
    5px 50%,
    var(--slant-x) 3px,
    100% 3px
  );
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 0;
}

#sidebuchen-menu:hover::after {
  opacity: 1;
}

#sidebuchen-menu a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em; 
  
  color: var(--permaweiss);
  text-decoration: none;
  font-family: sans-serif;
  font-weight: 700;

  font-size: calc(var(--hex-h) * 0.068);
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.45;
  white-space: normal;
  box-sizing: border-box;
  
  position: absolute;
  top: 50%;
  left: calc(50% + calc(var(--hex-h) * 0.07));
  
  width: var(--hex-h);
  padding: 0 calc(var(--hex-h) * 0.09);
  height: calc(var(--hex-w) * 2.5);

  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform 0.2s ease;
  
  flex-shrink: 0;
  cursor: pointer;
  z-index: 1;
}

#sidebuchen-menu a:hover,
#sidebuchen-menu a:focus {
  text-decoration: none;
}

#sidebuchen-menu:hover a {
  transform: translate(-50%, -50%) rotate(90deg) scale(0.93);
}

/* =========================================================
   SVGs: HINTERGRUND-BILDER
   ========================================================= */
#sidebuchen-menu a::before,
#sidebuchen-menu a::after {
  content: "";
  display: inline-block;

  width: calc(var(--hex-h) * 0.16);
  height: calc(var(--hex-h) * 0.16);
  margin-top: calc(var(--hex-h) * -0.105);
  flex-shrink: 0;

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  transition: transform 0.2s ease, background-image 0.2s ease;
}

/* Linkes Icon: Personengruppe (Weiß) */
#sidebuchen-menu a::before {
  margin-left: calc(var(--hex-h) * -0.066);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12.27 -20 140 140' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='28.87,0.5 86.6,0.5 114.97,50 86.6,99.5 28.87,99.5 0.5,50' stroke-width='3.5'/%3E%3Cg transform='translate(31.34 23.6) scale(2.2)' stroke-width='1.8'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/g%3E%3C/svg%3E");
}

/* Rechtes Icon: Kalender (Weiß) */
#sidebuchen-menu a::after {
  margin-right: calc(var(--hex-h) * -0.066);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12.27 -20 140 140' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='28.87,0.5 86.6,0.5 114.97,50 86.6,99.5 28.87,99.5 0.5,50' stroke-width='3.5'/%3E%3Cg transform='translate(31.34 23.6) scale(2.2)' stroke-width='1.8'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/g%3E%3C/svg%3E");
}

/* Hover: Linkes Icon (Personengruppe, Orange - bitte ggf. %23FF9900 anpassen) */
#sidebuchen-menu:hover a::before {
  transform: scale(0.85);
}

/* Hover: Rechtes Icon (Kalender, Orange - bitte ggf. %23FF9900 anpassen) */
#sidebuchen-menu:hover a::after {
  transform: scale(0.85);
}

#sidebuchen-menu.active-box {
    display: none !important;
}


/* =========================================================
   MEDIA QUERIES (DESKTOP FIX FÜR CONTENT-BEREICH)
   ========================================================= */

/* FIX: Über einen einfachen Media Query wird verhindert, dass Stylus crasht */
@media screen and (max-width: 1790px) and (min-width: 1616px) {
  #sidebuchen-menu {
    --hex-h: calc(100vw - 1370px);
  }
}

/* =========================================================
   MEDIA QUERY: WABE AM UNTEREN RAND (Max 1615px)
   ========================================================= */
@media screen and (max-width: 1615px) {

    #sidebuchen-menu {
        --hex-w: 380px;
        --hex-h: 160px;
        
        /* FIX: Multiplikation statt Division */
        --slant-x: calc(var(--hex-h) * 0.28867);

        width: var(--hex-w);
        height: var(--hex-h);

        top: auto;
        bottom: 0;

        /* FIX: Multiplikation statt Division (/2 wurde zu *0.5) */
        right: calc(max(10px, (100vw - 1350px) * 0.5) + 2px);

        transform: translateY(55%);
        
        clip-path: polygon(
            var(--slant-x) 0%, 
            calc(100% - var(--slant-x)) 0%, 
            100% 50%, 
            calc(100% - var(--slant-x)) 100%, 
            var(--slant-x) 100%, 
            0% 50%
        );
        
        background: linear-gradient(to bottom, var(--orange1), var(--orange2));
        transition: background 0.25s ease;
    }

    #sidebuchen-menu:hover {
        background: linear-gradient(to bottom, var(--orange2), var(--orange1));
    }

    #sidebuchen-menu a {
        position: absolute;
        top: 22%;
        left: 50%;
        width: 77%;
        height: auto;
        padding: 0;
        flex-direction: row;
        gap: 12px;
        transform: translate(-50%, -50%);
        font-size: 17px;
        white-space: normal;
        text-align: center;
        line-height: 1.15;
        z-index: 1;
    }

    #sidebuchen-menu:hover a {
        transform: translate(-50%, -50%);
    }

    #sidebuchen-menu a::before,
    #sidebuchen-menu a::after {
        width: 60px;
        height: 60px;
        margin: 0;
        flex-shrink: 0;
    }
}

@media screen and (max-width: 750px) {
    #sidebuchen-menu {
        /* FIX: Multiplikation statt Division */
        right: calc((100vw - var(--hex-w)) * 0.5);
    }
}

@media screen and (max-width: 400px) {
    #sidebuchen-menu {
        --hex-w: 300px;
        --hex-h: 150px;
    }
    
    #sidebuchen-menu a {
        font-size: 13px;
        gap: 8px;
    }
    
    #sidebuchen-menu a::before,
    #sidebuchen-menu a::after {
        width: 48px;
        height: 48px;
    }
}

/* =========================================================
   SONSTIGE MEDIA QUERIES
   ========================================================= */

@media screen and (max-width : 750px){
	.temp #infotext {
		display: inline-flex;
		margin-left: calc(50% - 110px );
	}

	.haustemp, .haustemp2{
		text-align: center;
	}
}

@media screen and (min-width : 751px){
	.mobile {
		display: none;
	}
	.temp #infotext {
		display: inline-flex;
		margin-left: calc(50% - 235px );
	}
	.haustemp{
		width: 220px;
		text-align: right;
	}
	.haustemp2{
		width: 220px;
		text-align: left;
	}
}

@media screen and (min-width : 550px){
	.mobile2 {
		display: none;
	}

	.tv-button{
		display: inline-flex;
		position: absolute;
		left: 2%;
	}
}

@media screen and (max-width : 549px){
	.tv-button{
		display: inline-flex;
		position: absolute;
		left: calc(50% - 12.5px);
	}
}

@media screen and (max-width : 1150px){
	#footer {
		padding-bottom: 120px
	}
}


/* --- File: anderles-tv --- */
#tvb-logo{
	position: absolute;
	margin: 10px;
	max-width: 95px;
	width: 7vw !important;

}

@media screen and (min-width : 1130px){
	embed{
		height: 40vw;
		width: 69vw;
		background-color: var(--weiss);
	}
}

@media screen and (max-width : 1129px){
	embed{
		height: 48vw;
		width: 89vw;
		background-color: var(--weiss);
	}
}


/* --- File: anderles-partner-slider --- */

.slider img {
    width:75%;

}

@media screen and (min-width : 1130px){
	.slider {
		overflow: hidden;
		position: fixed;
		top: 60vh;
		right: -2%;
		max-width: 15%;
	}
	.slider-mobile {
		display: none;
	}	




}

@media screen and (max-width : 1129px){
	.slider-mobile {
		display: flex;
		align-items: center;
		justify-content: center;
	}	

	.slider {
		display: none;
	}

}



/* --- File: anderles-text --- */
.wp-block-gallery {
    margin-top: 25px !important;
}

hr {
	color: var(--green2);
}

/* -------------------------------------------------------------
   H1: Das große Banner-Polygon (früher h2)
   ------------------------------------------------------------- */
h1, h1:hover {
    color: var(--permaweiss) !important;
    cursor: default;
    pointer-events: none;        
    text-decoration: none;

    /* Auf Textbreite beschränken & zentrieren */
    width: fit-content !important;
    display: block !important;
    margin-inline: auto !important;
    text-align: center;

    position: relative;
    z-index: 1;

    /* 1. Äußere Box = ORANGE */
    background: var(--orange2) !important;
    border: none !important;
    filter: none !important;
    mask: none !important;
    -webkit-mask: none !important;

    /* Äußere Form */
    --spitze: 0.7em;
    clip-path: polygon(
        var(--spitze) 0%,
        calc(100% - var(--spitze)) 0%,
        100% 50%,
        calc(100% - var(--spitze)) 100%,
        var(--spitze) 100%,
        0% 50%
    ) !important;

    /* Rahmendicke festlegen */
    --rand: 2.5px;

    /* Innenabstand für Text */
    padding: calc(0.35em + var(--rand)) calc(2.2em + var(--rand)) !important;
    font-size: 1.8rem !important;
    line-height: 2.2rem !important;
    box-sizing: border-box !important;
    margin-top: -1rem !important;
    margin-bottom: 2rem !important;

    word-break: break-word;
    hyphens: auto;
}

/* 2. Innere Fläche = GRÜN */
h1::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    
    /* Box ist EXAKT genauso groß wie die äußere (kein Winkelverzug!) */
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--green2) !important;
    z-index: -1 !important;

    /* 
       PERFEKTE PARALLELE:
       Die Punkte werden im Polygon selbst um exakt die Rahmendicke 
       nach innen versetzt. Dadurch stimmen Winkel und Kantenbreite überall überein!
    */
    --w: calc(var(--spitze) + var(--rand) * 0.414);
    clip-path: polygon(
        var(--w) var(--rand),
        calc(100% - var(--w)) var(--rand),
        calc(100% - var(--rand) * 1.414) 50%,
        calc(100% - var(--w)) calc(100% - var(--rand)),
        var(--w) calc(100% - var(--rand)),
        calc(var(--rand) * 1.414) 50%
    ) !important;
}

/* Altes ::after deaktivieren */
h1::after {
    content: none !important;
    display: none !important;
}


/* -------------------------------------------------------------
   H2: Sechseck-Design (für alle h2)
   ------------------------------------------------------------- */
h2 {
    background: var(--green2) !important;
    color: var(--permaweiss) !important;
    border: none !important;

    /* Zentriert auf Textbreite mit Flexbox für die Sechsecke */
    display: flex !important;
    width: fit-content !important;
    margin-inline: auto !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0.9rem !important;

    /* Abstände */
    padding: 0.45rem 1.4rem !important;
    margin-top: 2.2rem !important;
    border-radius: 4px;
}

/* Verhindert, dass <strong> oder <a> in WordPress die Farbe/Struktur stören */
h2,
h2 * {
    color: var(--permaweiss) !important;
    text-decoration: none !important;
}

/* Pseudo-Elemente Sechsecke einfügen */
h2::before,
h2::after {
    display: inline-block !important;
    content: "" !important;
    position: static !important;
    inset: auto !important;
    clip-path: none !important;
    z-index: auto !important;

    /* Flaches Sechseck (Flache Seite oben und unten) */
    width: 1.35em !important;
    height: 1.15em !important;
    flex-shrink: 0 !important;

    /* Flaches gleichseitiges Sechseck als inline-SVG */
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;

    /* Füllung: Orange (#ff9900), Rahmen: Schwarz (#000000) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 86.6'%3E%3Cpolygon points='25,2 75,2 98,43.3 75,84.6 25,84.6 2,43.3' fill='%23ff9900' stroke='%23000000' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}


h3 {
    color: var(--hx);
}

p, span {
    color: var(--text);
	line-height: 1.9;
    text-align: justify;
    word-break: normal;
    hyphens: auto;
}


.entry ul {
	color: var(--text);
    margin-left: 15px;
    text-align: justify;
}

y5 {
	  font-size: xx-large;
}
.wp-block-list {
	margin-left: 2cqi;
}


.ausstattung {
    width: 100%;
    padding: 20px 0;
    box-sizing: border-box;
}

.ausstattung-grid {
    max-width: 1100px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

/* Kacheln für Ausstattung */
/* Kachel */

.ausstattung-box {
    background: var(--hintergrund);
    border: 2px solid var(--green2);
    color: var(--schwarz);

    padding: 20px;
    box-sizing: border-box;
}


/* Überschrift */

.ausstattung-box h3 {
    margin: 0 0 16px;

    color: var(--green2);
    text-align:center;

    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;

    text-transform: uppercase;
}


/* Bildbereich */

.ausstattung-bild {
    width: 100%;
    aspect-ratio: 16 / 9;

    margin-bottom: 18px;

    background: var(--schwarz);

    border: 1px solid var(--green2);

    overflow: hidden;
}


/* tatsächliches Bild */

.ausstattung-bild img {
    width: 100%;
    height: 100%;

    display: block;
    border-radius: 0px;
    object-fit: cover;
}


/* Aufzählung */

.ausstattung-box ul {
    margin: 0;
    padding: 0;

    list-style: none;
}
.ausstattung-box li {
    position: relative;
    padding-left: 24px;

    color: var(--text);
    font-size: 16px;
    line-height: 1.45;
}

.ausstattung-box li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0.72em;

    width: 13px;
    height: 11px;

    transform: translateY(-50%);

    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 86.6'%3E%3Cpolygon points='25,2 75,2 98,43.3 75,84.6 25,84.6 2,43.3' fill='%23ff9900' stroke='%23000000' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ausstattung-box li > ul li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 86.6'%3E%3Cpolygon points='25,2 75,2 98,43.3 75,84.6 25,84.6 2,43.3' fill='%23139900' stroke='%23000000' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}


/* Mobil */
@media (max-width: 600px) {

    .ausstattung {
        padding: 12px 0;
    }

    .ausstattung-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ausstattung-box {
        padding: 16px;
    }

    .ausstattung-box h3 {
        font-size: 19px;
    }

}

/* ==========================================================================
   RESPONSIVE ÜBERSCHRIFTEN
   ========================================================================== */

/* Tablet & Desktop: Max-Width für bessere Lesbarkeit */
@media (min-width: 501px) {
    h1, h1:hover, h2 {
        max-width: 80% !important;
    }
}

@media (min-width: 501px) and (max-width: 900px) {
    h1, h1:hover {
        padding: calc(0.35em + var(--rand)) calc(2.2em + var(--rand)) !important;
        font-size: 1.3rem !important;
        line-height: 1.9rem !important;
    }
}

@media (max-width: 500px) {
    h1, h1:hover {
        padding: calc(0.35em + var(--rand)) calc(2.2em + var(--rand)) !important;
        font-size: 1.2rem !important;
        line-height: 1.6rem !important;
    }

    h2 {
        padding: 0.45rem 0.75rem !important;
    }

    h2::before,
    h2::after {
        /* Flaches Sechseck (Flache Seite oben und unten) */
        width: 0.85em !important;
        height: 0.75em !important;
    }
}

@media (min-width: 1920px) {
    h1, h1:hover {
        font-size: calc((20 * 100vw) / 1920) !important;
    }
}


/* --- File: anderles-kalender --- */
/* ============================================================
   1. GRUNDSTRUKTUR (Klassisch & sicher vor JS-Fehlern)
   ============================================================ */

.calendarWidget .container,
.calendarWidget .container.multiCalendarWidget {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    color: inherit !important;
    max-width: 960px !important; 
    margin: 0 auto !important;
}

/* Verhindert, dass Smoobus JS die Tabellen auf dem Handy zerschießt */
.multiCalendarWidget .fullCalendar {
    transition: none !important;
}

/* ANTI-SMOOBU-HACK: 
   Sollte das JavaScript versehentlich die ".smallDevices" Klasse auf dem 
   Desktop aktivieren, ignorieren wir sie hier und zwingen es auf 50%! */
@media (min-width: 801px) {
    .multiCalendarWidget .fullCalendar.smallDevices {
        width: 50% !important;
        float: left !important;
    }
}


/* ============================================================
   2. TEXTE & HEADER (Dein Original)
   ============================================================ */
.multiCalendarWidget a {
    text-decoration: none !important;
}
.multiCalendarWidget h2 {
    font-size: 20px !important;
    line-height: 1.25em !important;
    margin: .25em 0 !important;
}
.multiCalendarWidget h3 {
    font-size: 1.5em !important;
    line-height: 1em !important;
    margin: .33em 0 !important;
}
.multiCalendarWidget .singleCalendarWidget,
.multiCalendarWidget .singleCalendarWidget h2 {
    text-align: center !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
}
.multiCalendarWidget .singleCalendarWidget .header,
.multiCalendarWidget .singleCalendarWidget h2 .header {
    position: relative !important;
}
.multiCalendarWidget .singleCalendarWidget .header div,
.multiCalendarWidget .singleCalendarWidget h2 .header div {
    position: relative !important;
	color: var(--text) !important;
}
.multiCalendarWidget .singleCalendarWidget h2,
.multiCalendarWidget .singleCalendarWidget h2 h2 {
    text-transform: uppercase !important;
}


/* ============================================================
   3. TABELLE (Blockiert Smoobus hartcodierte 50px)
   ============================================================ */
.multiCalendarWidget .singleCalendarWidget table,
.multiCalendarWidget .singleCalendarWidget h2 table {
    width: 100% !important;
    table-layout: fixed !important;      
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}
.multiCalendarWidget .singleCalendarWidget table thead,
.multiCalendarWidget .singleCalendarWidget h2 table thead {
    font-weight: 600 !important;
    text-transform: uppercase !important;
}
.multiCalendarWidget .singleCalendarWidget table tbody,
.multiCalendarWidget .singleCalendarWidget h2 table tbody {
    color: var(--permagrau) !important;
}
.multiCalendarWidget .singleCalendarWidget table tr,
.multiCalendarWidget .singleCalendarWidget h2 table tr {
    width: 100% !important;
}

/* Überschreibt das Quetschen in den Zellen */
.multiCalendarWidget .singleCalendarWidget table td,
.multiCalendarWidget .singleCalendarWidget h2 table td {
    padding: 0 !important;
    box-sizing: border-box;
    height: 66px !important;             
    line-height: 66px !important;
    text-align: center !important;
    width: auto !important;              
}


/* ============================================================
   4. DEINE FARBEN (Dein Original)
   ============================================================ */
.multiCalendarWidget .singleCalendarWidget table td:empty{
    background: var(--hintergrund);
	color: var(--text) !important;
}
.multiCalendarWidget .singleCalendarWidget table thead td{
    background: var(--hintergrund);
	color: var(--text) !important;
}
.multiCalendarWidget .singleCalendarWidget table td,
.legende .free{
    background: lightgreen;
	color: var(--permagrau) !important;
}
.multiCalendarWidget .singleCalendarWidget table td.normal,
.multiCalendarWidget .singleCalendarWidget h2 table td.normal,
.legende .normal {
    background-color: #ffbfbf !important;
	color: var(--permagrau) !important;
}
.multiCalendarWidget .singleCalendarWidget table td.arrival,
.multiCalendarWidget .singleCalendarWidget h2 table td.arrival,
.legende .arrival{
    background: linear-gradient(to right bottom, lightgreen 50%, #ffbfbf  50%) !important;
	color: var(--permagrau) !important;
}
.multiCalendarWidget .singleCalendarWidget table td.departure,
.multiCalendarWidget .singleCalendarWidget h2 table td.departure,
.legende .departure {
    background: linear-gradient(to right bottom, #ffbfbf 50%, lightgreen 50%) !important;
	color: var(--permagrau) !important;
}
.multiCalendarWidget .singleCalendarWidget table td.current-day,
.multiCalendarWidget .singleCalendarWidget h2 table td.current-day {
    border: 2px solid var(--green1) !important;
}


/* ============================================================
   5. PFEILE, BUTTONS & LOGO (Dein Original)
   ============================================================ */
.multiCalendarWidget .btn-prev,
.multiCalendarWidget .btn-next {
    border-radius: 50% !important;
    color: #cbd1d2 !important;
    height: 32px !important;
    font-size: 16px !important;
    line-height: 28px !important;
    margin: -12px !important;
    position: absolute !important;
    top: 32% !important;
    width: 32px !important;
}
.multiCalendarWidget .btn-prev.smallDevices,
.multiCalendarWidget .btn-next.smallDevices {
    top: -20px !important;
}
.multiCalendarWidget .btn-prev {
    left: 26px !important;
}
.multiCalendarWidget .btn-prev.smallDevices {
    left: 16px !important;
}
.multiCalendarWidget .btn-next {
    right: 26px !important;
}
.multiCalendarWidget .btn-next.first {
    display: none !important;
}
.multiCalendarWidget .btn-next.smallDevices {
    right: 16px !important;
}
.multiCalendarWidget .btn-next.smallDevices.first {
    display: inherit !important;
}
.multiCalendarWidget .btn-next.smallDevices.last {
    display: none !important;
}
.multiCalendarWidget .logo {
    display: none !important;
}


/* ============================================================
   6. LEGENDE & HEADER (Dein Original)
   ============================================================ */
.legende{
	color: var(--text);
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 25px;
}
.legende td:nth-child(2) {
  padding-left: 25px;
}
.calendarWidget {
    display: flex;
    justify-content: center;
}
#main .entry #secondPartHeader h2, #main .entry #secondPartHeader h2::before, #main .entry #secondPartHeader h2::after {
    background-color: unset !important;
    width: 100% !important;
    margin: 0 !important;
    background: unset !important;
    background-image: unset !important;
    word-break: unset !important;
    -webkit-hyphens: none;
    hyphens: none;
    color: var(--schwarz) !important;
}


/* ============================================================
   7. KLICKSICHERE FARBFILTER FÜR DIE PFEILE
   ============================================================ */
.multiCalendarWidget a[class*="btn-prev"] img,
.multiCalendarWidget a[class*="btn-next"] img,
.multiCalendarWidget a[class*="btn-prev"] svg,
.multiCalendarWidget a[class*="btn-next"] svg {
  filter: brightness(0) !important;
}

body.dark-theme .multiCalendarWidget a[class*="btn-prev"] img,
body.dark-theme .multiCalendarWidget a[class*="btn-next"] img,
body.dark-theme .multiCalendarWidget a[class*="btn-prev"] svg,
body.dark-theme .multiCalendarWidget a[class*="btn-next"] svg {
  filter: brightness(0) invert(1) !important;
}


/* ============================================================
   8. RESPONSIVE ANPASSUNGEN (Behebt den Bug beim Drehen!)
   ============================================================ */

/* STUFE 1: QUERFORMAT-HANDYS & TABLETS (761px bis 980px) */
/* Der Kalender bleibt zweispaltig, aber die Kästchen schrumpfen auf 48px, 
   damit sie auf dem flachen Display nicht vertikal überlaufen. */
@media (max-width: 980px) {
    .multiCalendarWidget .singleCalendarWidget table td,
    .multiCalendarWidget .singleCalendarWidget h2 table td {
        height: 48px !important;
        line-height: 48px !important;
        font-size: 15px !important;
    }
}

/* STUFE 2: HOCHKANT-HANDYS (bis 760px) */
/* Zwingt den Kalender sicher auf 1 Spalte untereinander */
@media (max-width: 760px) {
    .multiCalendarWidget .fullCalendar,
    .multiCalendarWidget .fullCalendar.smallDevices {
        width: 100% !important;
        float: none !important;
    }
    
    .multiCalendarWidget .singleCalendarWidget table td,
    .multiCalendarWidget .singleCalendarWidget h2 table td {
        height: 42px !important;
        line-height: 42px !important;
        font-size: 14px !important;
    }
}


/* --- File: anderles-darkmode --- */

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;

}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.sliderdark {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.sliderdark:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: var(--green1);
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .sliderdark {
  background-color: var(--orange1);
}

input:focus + .sliderdark {
  box-shadow: 0 0 1px var(--orange1);
}

input:checked + .sliderdark:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.sliderdark.round {
  border-radius: 34px;
}

.sliderdark.round:before {
  border-radius: 50%;
}

.darkmode{
	color: var (--text);
}

@media screen and (min-width : 550px){
	.darkmode{
	  position: absolute;
	  display: inline-block;
	  top: 7px;
	  right:2%;
	}

}


@media screen and (max-width : 549px){

	.darkmode {
		position: relative;
		display: block;
		margin-left: calc(50% - 71.4px);
		margin-top: 2%;
		margin-bottom: 10px;
		
	}
	

}





/* --- File: anderles-contact --- */
/* Style the tab */
@media screen and (min-width : 1469px){
	.tab_faq {
		overflow: hidden;
		background: linear-gradient(var(--green1), var(--green2)); !important;
	}


	/* Style the buttons inside the tab */
	.tab_faq button {
		color: var(--permaweiss);
		padding: 7px 15px;
		margin-top:0px;
		display: inline-block;
		background: linear-gradient(var(--green1), var(--green2)); !important;
		float: left;
		border: none;
		outline: none;
		cursor: pointer;
		padding: 14px 16px;
		transition: 0.3s;
		font-size: 17px;
	}



	/* Change background color of buttons on hover */
		.tab_faq button:hover {
		background: linear-gradient(var(--green2), var(--green1)); !important;
	}

	/* Create an active/current tablink class */
		.tab_faq button.active,
		.tab_faq button.activeParent,
		.tab_faq button.activeEN,
		.tab_faq button.activeen  {
		background: linear-gradient(var(--orange1), var(--orange2)); !important;
		color: var(--permaschwarz);
	}

	/* Style the tab content */
	.tabcontent_faq {
		display: none;
		padding: 6px 12px;
		border: 1px solid var(--green1);
	}

}


@media screen and (max-width : 1468px){

	.tab_faq button.active {
		background: linear-gradient(var(--orange1), var(--orange2)); !important;
		color: var(--permaschwarz);
	}
	.tablinks_faq{
		width: 100%;
	}

	.tab_faq button {
		color: var(--permaweiss);
		background: linear-gradient(var(--green1), var(--green2)); !important;
	}

	/* Change background color of buttons on hover */
	.tab_faq button:hover {
		background: linear-gradient(var(--green2), var(--green1)); !important;
	}	

}

@media screen and (min-width : 900px){
	.tab {
		overflow: hidden;
		background: linear-gradient(var(--green1), var(--green2)); !important;
	}


	/* Style the buttons inside the tab */
	.tab button {
		color: var(--permaweiss);
		padding: 7px 15px;
		margin-top:0px;
		display: inline-block;
		background: linear-gradient(var(--green1), var(--green2)); !important;
		float: left;
		border: none;
		outline: none;
		cursor: pointer;
		padding: 14px 16px;
		transition: 0.3s;
		font-size: 17px;
	}



	/* Change background color of buttons on hover */
		.tab button:hover {
		background: linear-gradient(var(--green2), var(--green1)); !important;
	}

	/* Create an active/current tablink class */
		.tab button.active,
		.tab button.activeParent,
		.tab button.activeEN {
		background: linear-gradient(var(--orange1), var(--orange2)); !important;
		color: var(--permaschwarz);
	}

	/* Style the tab content */
	.tabcontent,
	.tabcontenten {
		display: none;
		padding: 6px 12px;
		border: 1px solid var(--green1);
	}

}


@media screen and (max-width : 899px){

	.tab button.active,
	.tab button.activeParent,
	.tab button.activeEN {
		background: linear-gradient(var(--orange1), var(--orange2)); !important;
		color: var(--permaschwarz);
	}
	.tablinks{
		width: 100%;
	}

	.tab button {
		color: var(--permaweiss);
		background: linear-gradient(var(--green1), var(--green2)); !important;
	}

	/* Change background color of buttons on hover */
	.tab button:hover {
		background: linear-gradient(var(--green2), var(--green1)); !important;
	}	

}


/*___________________________________________________________*/


.anfragen label{
  display:block;
  color: var(--text);
  font-weight: bold;
  font-size:16px;
}
.anfragen .holder{
  display:inline-block;
  margin-right: 20px;
  margin-top:0px;
  vertical-align:40px;
}


.anfragen input[type="submit"]:hover, #anfrage_button:hover{
  background: linear-gradient(var(--braun2), var(--braun1));
  color: var(--schwarz);
  border-radius: 3px;
}

.anfragen input[type="submit"], #anfrage_button{
  background: linear-gradient(var(--braun1), var(--braun2)); /* Orange */
  color: var(--schwarz);
  margin-top:10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  width: 380px;
  max-width:100%;
  padding: 15px;
  font-size: 16px;
  border-radius: 3px;
  border: none;
}

.faq_img {
	width: 720px;
	max-width: 100%;
}

#hahayolo{
	display: none;
}


.anfragen{

}


/* --- File: anderles-social-menu --- */
@media screen and (min-width : 1130px){
	.sozial_menu{
		margin-top: -69px;
	}
}

folge{
	font-family: "Open Sans", sans-serif;
	font-weight: 700;
	font-size: 18px;
	text-align: center;
}
folge_text{
	padding-left: 26px;
}

.speech-bubble {
	display: flex;
	width: fit-content;
	margin: auto auto auto auto;
	padding: 5px 60px;
	background: var(--bubble);
	color: var(--permaweiss);
	line-height: 3em;
	margin-top: 1em;
	padding: 0 1em;
	position: relative;

	vertical-align: top;
	min-width: 8em;
	border-radius: 20px;
	rotate: -2deg;
}

.speech-bubble::after {
	border: 1em solid transparent;
	border-top-color: transparent;
	border-top-color: var(--bubble);
	content: '';
	position: absolute;
	top: 66%;
	left: 11%;
	width: 0;
	height: 0;
	rotate: 79deg;
	
}
.sozial_menu ul{
	list-style: none;
	display: flex;
	width: fit-content;
	margin: auto auto auto auto;
	padding: 0px;

}

.sozial_menu a{
	line-height: 75px;
}

.sozial_menu ul li{

	width: 75px;
}

.sozial_menu .menu-item a[title="insta"],
.dark-theme .sozial_menu .menu-item a[title="insta"]{
  	background-image:url("/wp-content/uploads/anderles/sozialmenu/Instagram_Glyph_White.webp");
	background-size:40px;
	background-position: center;
	background-repeat: no-repeat;
	font-size: 0px;
}

.dark-theme .sozial_menu .menu-item a[title="fb"],
.sozial_menu .menu-item a[title="fb"]{
  	background-image:url("/wp-content/uploads/anderles/sozialmenu/Facebook_Logo_Secondary.webp");
	background-size:40px;
	background-position: center;
	background-repeat: no-repeat;
	font-size: 0px;
}

.sozial_menu .menu-item a[title="youtube-profil"],
.dark-theme .sozial_menu .menu-item a[title="youtube-profil"]{
  	background-image:url("/wp-content/uploads/anderles/sozialmenu/yt_icon_mono_dark.webp");
	background-size:40px;
	background-position: center;
	background-repeat: no-repeat;
	font-size: 0px;
}

.sozial_menu .menu-item a[title="tiktok-link"],
.dark-theme .sozial_menu .menu-item a[title="tiktok-link"]{
  	background-image:url("/wp-content/uploads/anderles/sozialmenu/TikTok_Icon_Black_Circle_1.webp");
	background-size:40px;
	background-position: center;
	background-repeat: no-repeat;
	font-size: 0px;
}

.light-theme .sozial_menu .menu-item a[title="insta"]{
  	background-image:url("/wp-content/uploads/anderles/sozialmenu/Instagram_Glyph_Gradient.webp");
	background-size:40px;
	background-position: center;
	background-repeat: no-repeat;
	font-size: 0px;
}

.light-theme .sozial_menu .menu-item a[title="fb"]{
  	background-image:url("/wp-content/uploads/anderles/sozialmenu/Facebook_Logo_Primary.webp");
	background-size:40px;
	background-position: center;
	background-repeat: no-repeat;
	font-size: 0px;
}

.light-theme .sozial_menu .menu-item a[title="youtube-profil"]{
  	background-image:url("/wp-content/uploads/anderles/sozialmenu/yt_icon_rgb.webp");
	background-size:40px;
	background-position: center;
	background-repeat: no-repeat;
	font-size: 0px;
}

.light-theme .sozial_menu .menu-item a[title="tiktok-link"]{
  	background-image:url("/wp-content/uploads/anderles/sozialmenu/TikTok_Icon_Black_Circle.webp");
	background-size:40px;
	background-position: center;
	background-repeat: no-repeat;
	font-size: 0px;
}




/* --- File: anderles-buchungsdauer --- */
@media (max-width: 530px) {
  #buchungsdauer {
    flex-direction: column;
  }
}


body {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  overflow-x:hidden;
  color: #ababab; }



#buchungsdauer {
  display: flex;
  flex-wrap: wrap;
  gap: 7cqi;
}

.buchungsdauer {
  display: flex;
  justify-content: center;
  width: 100%;
}


#buchungsdauer li {
  width: 200px;
  height: 173.20508px;
  list-style-type: none;
  z-index: 0;
  position: relative;
}


.menu-item a[title="BSommer"]{
  background-image:url("/wp-content/uploads/anderles/buchungsdauer/green2_light.webp");
  background-size:83%;
  background-position: center;
  background-repeat: no-repeat;

}

.menu-item a[title="BWinter"]{
  background-image:url("/wp-content/uploads/anderles/buchungsdauer/green2_light.webp");
  background-size:83%;
  background-position: center;
  background-repeat: no-repeat;

}

.menu-item a:hover[title="BSommer"],
.menu-item a:hover[title="BWinter"]{
	text-decoration: none;
    opacity: 1;
    font-weight: 600 !important;
    color: var(--permaweiss);
    text-shadow: -1px -1px 0 var(--permaschwarz), 1px -1px 0 var(--permaschwarz), -1px 1px 0 var(--permaschwarz), 1px 1px 0 var(--permaschwarz);
    text-align: center;
}

body.dark-theme .menu-item a[title="BSommer"],
body.dark-theme .menu-item a[title="BWinter"] {
    background-image:url("/wp-content/uploads/anderles/buchungsdauer/green1_light.webp");
}

/*------------------------------------------------
    END Navigation
-------------------------------------------------*/







/* --- File: anderles-activity --- */
    body.light-theme {
      --card-gap: 1.25rem;
      --card-radius: 0px;
      --card-bg: #ffffff;
      --muted: #666;
      --accent: #0b6;
	  --accent_bg: rgba(11,102,85,0.1);
      --max-width: 1350px;
      --shadow: 0 6px 18px rgba(11,11,11,0.06);
    }

    body.dark-theme {
		--card-gap: 1.25rem;
		--card-radius: 0px;
		--card-bg: #1e1e1e;      
		--muted: #a0a0a0;        
		--accent: var(--permaweiss); 
		--accent_bg: var(--green1);      
		--max-width: 1350px; 
		--shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
	}

    .activity-wrap {
      width: 100%;
      max-width: var(--max-width);
      margin: auto;
    }

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

    .activity-header h1 {
      font-size: 1.4rem;
      margin: 0;
    }

    .activity-header p {
      margin: 0;
      color: var(--muted);
    }

    h2 {
      margin: 0 0 1rem 0;
      font-size: 1.25rem;
    }

    .activity-section {
      margin: 1.5rem 0;
    }

    .activity-list {
      display: flex;
      flex-direction: column;
      gap: var(--card-gap);
    }

    .activity-card {
      display: flex;
      align-items: stretch;
      gap: 1rem;
      background: var(--card-bg);
      border-radius: var(--card-radius);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .activity-list .activity-card:nth-child(even) {
      flex-direction: row-reverse;
    }

    .activity-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .activity-card-media {
      flex: 0 0 40%;
      min-width: 180px;
      display: block;
      position: relative;
      margin: 0px;
      max-width: 350px;
    }

    .activity-card-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      aspect-ratio: 1/1;
      max-width: 350px;
      max-height: 350px;
      margin: 0px;
	  border-radius: 0;
    }

    .activity-card-body {
      padding: 1rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.5rem;
    }

    .activity-card-title {
      font-weight: 700;
      margin: 0;
    }

    .activity-card-meta {
      font-size: 0.9rem;
      color: var(--muted);
    }

    .activity-card-desc {
      margin: 0;
      color: var(--text);
      line-height: 1.45;
    }

    .activity-badge {
      font-size: 0.75rem;
      padding: 0.25rem 0.5rem;
      border-radius: 999px;
      background: var(--accent_bg);
      color: var(--accent);
      display: inline-block;
      margin-top: 5px;
    }

    @media (max-width:760px) {
      .activity-card-media {
        flex-basis: 100%;
        min-width: 0;
        max-width: 100%;
      }

      .activity-list .activity-card:nth-child(even) {
        flex-direction: column;
      }

      .activity-card {
        flex-direction: column;
      }

      .activity-card-media img {
        aspect-ratio: 1/1;
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: 350px;
      }
    }


/* --- File: anderles-cookiebanner --- */
/* Basis-Design für deinen Button */
.footer-cookie-settings button{
    background-color: var(--permagrau) !important;     /* Hintergrundfarbe */
    color: #fff;                   /* Textfarbe */
    padding: 10px 20px;            /* Innenabstand */
    border: none;                  /* keine Rahmenlinie */
    border-radius: 8px;            /* abgerundete Ecken */
    font-size: 16px;               /* Schriftgröße */
    font-weight: bold;             /* fett */
    cursor: pointer;               /* Zeiger-Hand bei Hover */
    transition: background-color 0.3s ease, transform 0.2s ease;
    background-image: none !important;
}

/* Hover-Effekt */
.footer-cookie-settings button:hover {
    background-color: #e05500;     /* dunkleres Orange */
    transform: scale(1.05);        /* leichtes Vergrößern */
}

/* Optional: Fokus-Stil für Barrierefreiheit */
.footer-cookie-settings button:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Wenn der Button als Link genutzt wird */
a..footer-cookie-settings button {
    display: inline-block;
    text-decoration: none;
}

.footer-cookie-settings {
    text-align: center;   /* Inhalt zentrieren */
    padding: 15px 0;      /* etwas Abstand nach oben/unten */
}


/* --- File: anderles-gemeinde --- */
.parken{
	box-sizing: border-box;
	list-style: none;
	column-count: 2;
	max-width: 600px;
}

.hallenbad{
	box-sizing: border-box;
	list-style: none;
	column-count: 3;
	max-width: 630px;
}


/* --- File: anderles-news --- */
.news {
  width: 40%;          /* Breite des sichtbaren Bereichs */
  overflow: hidden;
  margin: 0 auto;        /* ← zentriert das div */
  white-space: nowrap;
  background-color:var(--orange2);
  color:var(--permaschwarz);
}

.news-content {
  display: inline-block;
  padding-left: 100%;
  animation: scroll 20s linear infinite;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@media screen and (max-width : 1130px){ /*MOBIL für MENÜ*/

       .news {
            width: 100%;          /* Breite des sichtbaren Bereichs */
            overflow: hidden;
            margin: 0 auto;        /* ← zentriert das div */
            white-space: nowrap;
            background-color:var(--orange2);
            color:var(--permaschwarz);
            }

    }


/* --- File: anderles-booking-flatpickr --- */
.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/*
      /*rtl:begin:ignore*/left:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{/*
      /*rtl:begin:ignore*/right:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill .1s;transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);-webkit-box-sizing:border-box;box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}.dayContainer + .dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}

/* --- File: anderles-booking-kalender2026 --- */
/* ==========================================================================
   BUCHUNGSKALENDER 2026 - COMPACT INPUT, PERFECT ROUNDING & HEADER FIX
   ========================================================================== */

:root {
  /* Farbpalette: Forest & Amber Glow aus root.css */
  --bg-color: #121417;
  --surface-color: #1E2126;
  --text-main: #E2E8F0;
  --text-muted: #94A3B8;
  --accent-green: #769371;
  --accent-orange: #D97706;
  --accent-orange-hover: #b46205;
  --danger: #934a4a;
  
  /* Stil-Variablen */
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --transition: all 0.2s ease-in-out;
  --shadow: 0 4px 15px rgba(0, 0, 0, 0.4);

  /* Kalender-Statusfarben (Originale Pastelltöne aus kalender2026_alt.css) */
  --color-green: #d4edda;
  --color-yellow: #fff3cd;
  --color-blue: #e0d1be; 
  --color-red: #f8d7da;
  --text-red: #721c24;

  /* Auswahl-Farben (Kräftiges, deckendes Amber/Orange) */
  --color-selection: var(--accent-orange);
  --color-selection-dark: var(--accent-orange-hover); 
  --color-orange: var(--accent-orange);
}

/* ==========================================
   1. CONTAINER & FRAMEWORK-STYLING
   ========================================== */

.container {
  max-width: 900px;
  margin: auto;
  padding: 30px;
  background: var(--surface-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text-main);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Dropdown-Kalender (Dunkel) */
.flatpickr-calendar {
  background: var(--surface-color) !important; 
  border: none !important;
  outline: none !important;
  box-shadow: var(--shadow) !important;
  color: var(--text-main) !important;
}


/* ==========================================
   2. REIN WEISSE DATUMSBOX (ORIGINALMAẞE)
   ========================================== */

input#booking-calendar {
  width: 221px !important;             /* Kompakte Breite aus kalender2026_alt.css */
  padding: 7px !important;              /* Schlankes Padding aus kalender2026_alt.css */
  margin-bottom: 20px;
  margin-right: 10px;
  font-size: 14px !important;           /* Originalgröße aus kalender2026_alt.css */
  background: #ffffff !important;       /* Weißer Hintergrund */
  color: #333333 !important;           /* Dunkler Text */
  border: 1px solid #ddd !important;   /* Feiner Rahmen */
  border-radius: 3px !important;        /* Kleiner Eckenradius */
  cursor: pointer;
  box-sizing: border-box;
  transition: var(--transition);
}

input#booking-calendar:focus {
  border-color: var(--accent-orange) !important;
  outline: none;
}

#booking-calendar::placeholder { color: #666666; opacity: 1; }


/* ==========================================
   3. STRUKTUR & BASIS-STATUSFARBEN
   ========================================== */

.flatpickr-day {
  position: relative !important;
  height: 44px !important;    
  line-height: 44px !important;
  flex-basis: 14.2857% !important; 
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important; 
  box-sizing: border-box !important; 
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0 !important;
}

/* Unsichtbare Puffertage am Monatsanfang/-ende */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  display: flex !important;
  visibility: hidden;      
}

/* Zuweisung der Basis-Statusfarben */
.status-2 { background-color: var(--color-green) !important; }
.status-1 { background-color: var(--color-yellow) !important; }
.status-neg1 { background-color: var(--color-blue) !important; }
.status-0 { background-color: var(--color-red) !important; }

/* Standard-Textfarbe auf den Pastelltönen (Schwarz für optimale Lesbarkeit) */
.flatpickr-day { color: #000000 !important; }

/* Monat/Wochentag-Header im Picker (Hell) */
.flatpickr-month, .flatpickr-current-month, .flatpickr-weekday { 
  color: var(--text-main) !important; 
  fill: var(--text-main) !important; 
}
span.flatpickr-weekday { max-width: 44px; margin: 0; padding: 0; }
.flatpickr-weekday { background: transparent !important; margin: 0 !important; }


/* ==========================================
   4. SELECTION-FIX: STATUSFARBE UNTER RUNDUNG SICHBAR
   ========================================== */

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  border-color: transparent !important;
  color: #ffffff !important; /* Weißer Text auf der Auswahl */
  z-index: 5;
  isolation: isolate; /* Erzeugt einen Stacking-Context für das ::before Layering */
}

/* Die orangefarbene Decke schichtet sich über die Statusfarbe, lässt aber gerundete Kanten frei */
.flatpickr-day.selected::before,
.flatpickr-day.startRange::before,
.flatpickr-day.endRange::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--color-selection-dark) !important; /* Deckendes Dunkelorange */
  z-index: -1; 
}

/* Eckenrundung der Auswahl-Ebene */
.flatpickr-day.startRange::before { border-radius: 50px 0 0 50px !important; }
.flatpickr-day.endRange::before { border-radius: 0 50px 50px 0 !important; }
.flatpickr-day.selected.startRange.endRange::before { border-radius: 50px !important; }

/* Tage dazwischen (inRange): Kräftiges, deckendes Orange mit Balken-Verbindung */
.flatpickr-day.inRange {
  background: var(--color-selection) !important;
  border-color: var(--color-selection) !important;
  color: #ffffff !important;
  box-shadow: -5px 0 0 var(--color-selection), 5px 0 0 var(--color-selection) !important;
}


/* ==========================================
   5. WECHSELTAGE (SPLIT-EFFEKT)
   ========================================== */

.status-split {
  position: relative;
  overflow: hidden;
  background-color: var(--color-curr) !important;
  z-index: 1;
}

.status-split::after {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-color: var(--color-prev);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: -2 !important; 
  pointer-events: none;
  transform: scale(1.005); 
  backface-visibility: hidden;
}

/* Wenn der Wechseltag inRange ist, überdecken wir den Split komplett */
.flatpickr-day.inRange::after {
  display: none !important;
}


/* ==========================================
   6. INAKTIVE TAGE & SPERRLOGIK
   ========================================== */

/* Abgelaufene/leere Tage leicht im Hintergrund verblassen lassen */
.flatpickr-day.flatpickr-disabled:not(.status-0):not(.status-1):not(.status-2):not(.status-neg1):not(.status-split),
.not-allowed:not(.status-0):not(.status-1):not(.status-2):not(.status-neg1):not(.status-split) {
  color: rgba(255, 255, 255, 0.15) !important; 
}

/* Gebuchte inaktive Tage dezent abdunkeln */
.status-0.flatpickr-disabled, .status-0.not-allowed,
.status-1.flatpickr-disabled, .status-1.not-allowed,
.status-2.flatpickr-disabled, .status-2.not-allowed,
.status-neg1.flatpickr-disabled, .status-neg1.not-allowed,
.status-split.flatpickr-disabled, .status-split.not-allowed {
  color: rgba(0, 0, 0, 0.3) !important; 
}

.flatpickr-day.flatpickr-disabled, .not-allowed { cursor: not-allowed !important; pointer-events: all !important; }

/* Sperr-X Hover-Indikator */
.not-allowed:hover::before, .flatpickr-disabled:hover::before {
  content: "✕" !important;
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: bold; color: #ffffff !important;
  background-color: var(--danger) !important; z-index: 10 !important;
}
.not-allowed:hover, .flatpickr-disabled:hover { color: transparent !important; }

/* Normaler Hover-Effekt auf freien Tagen */
.flatpickr-day:hover:not(.not-allowed):not(.flatpickr-disabled) {
  background: var(--color-orange) !important;
  color: #ffffff !important;
}
.status-split:hover:not(.not-allowed):not(.flatpickr-disabled)::after {
  background-color: var(--color-orange) !important; clip-path: none;
}


/* ==========================================
   7. PFEILE & KALENDER-POSITIONIERUNG (FIXED)
   ========================================== */

.flatpickr-months .flatpickr-prev-month, 
.flatpickr-months .flatpickr-next-month {
  color: var(--text-main) !important;
  fill: var(--text-main) !important;
  transition: var(--transition) !important;
}
.flatpickr-months .flatpickr-prev-month:hover, 
.flatpickr-months .flatpickr-next-month:hover {
  color: var(--accent-orange) !important;
  fill: var(--accent-orange) !important;
}

.flatpickr-months { display: flex !important; justify-content: space-around; gap: 40px; }

/* --- FIX FÜR ABGESCHNITTENE MONATS-BUCHSTABEN --- */
.flatpickr-month { 
  flex: 1; 
  text-align: center; 
  overflow: visible !important; /* Erlaubt geschwungenen Buchstaben den Ausbruch */
}

.flatpickr-current-month { 
  overflow: visible !important; 
  width: 100% !important;
  left: 0 !important;
  padding: 0 !important;
}

.flatpickr-monthName-wrapper {
  overflow: visible !important;
  display: inline-block !important;
}
/* ------------------------------------------------ */

.flatpickr-calendar.multiMonth .flatpickr-days { display: flex !important; flex-direction: row; justify-content: center; gap: 40px; width: auto !important; }
.flatpickr-days > div:not(:first-child) { border-left: none !important; }

.dayContainer {
  display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important;
  width: 308px !important; min-width: 308px !important; max-width: 308px !important;
  padding: 0 !important; gap: 0 !important; border: none !important; box-shadow: none !important;
}
.flatpickr-calendar.multiMonth { width: 710px !important; }


/* ==========================================
   8. REIN WEISSE LEGENDE (EXAKT WIE DAVOR)
   ========================================== */

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 25px;
  padding: 15px;
  font-size: 13px;
  background: #ffffff !important;      /* Rein weißer Hintergrund */
  color: #333333 !important;          /* Dunkler Text */
  border-radius: var(--radius-sm);
  border: 1px solid #eee !important;  /* Rahmen aus kalender2026_alt.css */
}

.legend-item { display: flex; align-items: center; gap: 8px; line-height: 17px; }
.box { width: 18px; height: 18px; border: 1px solid #ccc !important; border-radius: 3px; }


/* ==========================================
   9. MEDIA QUERIES & MOBILE FIXES
   ========================================== */

@media (min-width: 768px) {
  .flatpickr-rContainer { margin-left: calc((100% - 660px) / 2); }
  .flatpickr-weekdaycontainer:first-child { margin-right: 44px; }
}

@media screen and (max-width: 360px) {
    .flatpickr-months { gap: 0 !important; }
    .dayContainer { width: 280px !important; min-width: 280px !important; max-width: 280px !important; }
    .flatpickr-day { height: 40px !important; line-height: 40px !important; flex-basis: 14.2857% !important; }
    .flatpickr-calendar { width: 280px !important; }
    .flatpickr-prev-month, .flatpickr-next-month { display: flex !important; padding: 10px !important; }
}


/* --- File: anderles-booking-progressbar --- */
 .stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1350px;
    margin: 40px auto;
    font-family: sans-serif;
    padding: 20px 10px;
    margin-bottom: 0px;
  }

  .step {
    display: flex;
    align-items: center;
    position: relative;
    /* Erlaubt den Steps, den verfügbaren Platz gleichmäßig zu füllen */
    flex: 1; 
  }

  /* Verhindert, dass der letzte Schritt sich unnötig dehnt */
  .step:last-child {
    flex: none;
  }

  .step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--permagrau);
    border: 2px solid var(--permagrau);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--permaweiss);
    z-index: 2;
    flex-shrink: 0; /* Kreis darf nicht gequetscht werden */
  }

  .step-label {
    margin-left: 10px;
    margin-right: 15px;
    white-space: nowrap;
    color: var(--permaweiss);
    font-size: 14px;
    z-index: 2;
  }

  /* Die Linie zwischen den Schritten */
  .step-line, .step-line:last-child {
    flex-grow: 1;
    height: 2px;
    background-color: var(--permaweiss) !important;
    margin-right: 15px;
    z-index: 1;
  }

.max-stage .step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--permaweiss);
    border: 3px solid var(--orange2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--permagrau);
    z-index: 2;
    flex-shrink: 0; /* Kreis darf nicht gequetscht werden */
  }

.max-stage .step-line {
    flex-grow: 1;
    height: 2px;
    background-color: var(--orange2);
    margin-right: 15px;
    z-index: 1;
  }


  /* --- ZUSTÄNDE --- */

  /* Aktiv */
  .step.active .step-circle {
    border-color: #C99901;
    color: var(--permaweiss);
    box-shadow: 0 0 8px rgba(33, 150, 243, 0.3);
	background: #C99901;
  }
  .step.active .step-label {
    color: var(--permaweiss);
    font-weight: bold;
  }

  /* Erledigt */
  .step.done .step-circle {
    background-color: var(--braun1);
    border-color: var(--braun1);
    color: var(--permaweiss);
  }
  .step.done .step-label {
    color: var(--permaweiss);
  }
  .step.done .step-line {
    background-color: var(--braun1);
  }


@media (max-width: 1350px) {
  .stepper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    /* 20px oben/unten, 30px links/rechts Abstand zum Rand */
    padding: 20px 30px;
    width: 100%;
    margin: 40px auto 0 auto;
    box-sizing: border-box; /* Damit das Padding die 100% Breite nicht sprengt */
  }

  /* DIE LINIE: Jetzt angepasst an das Padding */
  .stepper::before {
    content: "";
    position: absolute;
    top: 36px; /* 20px Padding + 16px halber Kreis */
    /* 30px Padding + 16px (halber Kreis) = 46px */
    left: 46px;
    right: 46px;
    height: 2px;
    background-color: var(--permaweiss);
    z-index: 1;
  }

  .step-line {
    display: none !important;
  }

  .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    flex: 1;
  }

  /* Ausrichtung der äußeren Steps */
  .step:first-child { align-items: flex-start; }
  .step:last-child { align-items: flex-end; }

  .step-circle {
    width: 32px;
    height: 32px;
    z-index: 3;
    background-color: var(--permagrau);
    flex-shrink: 0;
  }

  .step-label {
    margin-top: 10px;
    font-size: 13px;
    white-space: normal;
    text-align: center;
    width: 100%;
    color: var(--permaweiss);
  }

  /* Label-Korrektur damit sie bündig mit den Kreisen stehen */
  .step:first-child .step-label {
    text-align: left;
    width: auto;
    max-width: 100px; /* Begrenzt die Breite, damit es nicht in Step 2 ragt */
  }
  .step:last-child .step-label {
    text-align: right;
    width: auto;
    max-width: 100px;
  }
}

@media (max-width: 750px) {
  .stepper {
    flex-wrap: wrap; /* Erlaubt den Umbruch in die zweite Zeile */
    justify-content: center; /* Zentriert die Zeilen */
    padding: 20px 10px;
    gap: 30px 0; /* Vertikaler Abstand zwischen den Zeilen */
  }

  /* Wir entfernen die durchgehende Hintergrund-Linie von vorhin */
  .stepper::before {
    display: none;
  }

  .step {
    flex: 0 0 33.33%; /* Jeder Step nimmt genau ein Drittel der Breite ein */
    min-width: 33.33%;
    align-items: center !important; /* Alle Kreise mittig in ihrem Drittel */
    margin-bottom: 10px;
  }

  .step-label {
    text-align: center !important;
    width: 100%;
    font-size: 12px;
    max-width: none !important; /* Hebt die 100px Begrenzung von vorhin auf */
  }

  /* --- NEUE LINIEN-LOGIK FÜR DAS 3x2 RASTER --- */

  /* Wir blenden die alten Linien wieder ein, aber passen sie an */
  .step:not(:last-child) .step-line {
    display: block !important;
    position: absolute;
    height: 2px;
    background-color: var(--permaweiss);
    top: 16px;
    left: 50%;
    width: 100%;
    z-index: 1;
  }

  /* Die Linie nach dem 3. Step (Ende der ersten Reihe) muss weg */
  .step:nth-child(3) .step-line {
    display: none !important;
  }

  /* Die Linie nach dem 6. Step (Ende der zweiten Reihe) ist eh schon weg */
}

@media (max-width: 350px) {
  .stepper {
    flex-direction: column; /* Schritte untereinander */
    align-items: flex-start; /* Alles links bündig */
    padding: 20px 30px;
    gap: 0; /* Wir regeln den Abstand über die Steps selbst */
  }

  /* Hintergrund-Linie vom 750px-Schritt sicherheitshalber ausblenden */
  .stepper::before {
    display: none;
  }

  .step {
    flex: 0 0 auto;
    width: 100%;
    flex-direction: row; /* Kreis und Label nebeneinander */
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 30px; /* Der vertikale Abstand zwischen den Punkten */
    position: relative;
  }

  /* Letzter Step braucht keinen Abstand nach unten */
  .step:last-child {
    padding-bottom: 0;
  }

  .step-circle {
    margin-right: 15px; /* Abstand zwischen Kreis und Text */
    z-index: 2;
  }

  .step-label {
    margin: 0;
    text-align: left !important;
    font-size: 14px;
    width: auto;
  }

  /* --- VERTIKALE LINIE --- */
  .step:not(:last-child) .step-line {
    display: block !important;
    position: absolute;
    left: 16px; /* Mitte des 32px Kreises */
    top: 16px; /* Startet direkt unter dem Kreis */
    width: 2px; /* Linie ist jetzt schmal */
    height: 100%; /* So hoch wie das padding-bottom des Steps */
    background-color: var(--permaweiss);
    z-index: 1;
    margin: 0;
  }
}

/* Styling für die Sprachbox im Theme */
#langwahl .api-lang-switcher {
    margin-bottom: 25px;
    padding: 15px;
    background-color: #fcfcfc;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

#langwahl .api-lang-switcher label {
    display: block;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}

#langwahl .api-lang-switcher select {
    width: 100%;
    max-width: 300px;
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid #cccccc;
    border-radius: 4px;
}

.DropdownDE , .DropdownEN{
	display:none !important;
}


/* --- File: anderles-booking-weiterBuchen --- */
.weiterBuchenAufenthalt h2{
    background-color: unset!important;
    font-size: 1.25rem !important;
    color: var(--green2) !important;
    margin:0 !important;
    padding:0 !important;
    display:contents !important;
    width:100% !important;
}

.weiterBuchenAufenthalt h2::after,
.weiterBuchenAufenthalt h2::before{
    content: none !important;
    display: none !important;
}

.bookingHaus2026 p {
    margin: 15px 0;
}
.buchButton2026 p {
    text-align: center;
}

.bookingHaus2026 haus{
    text-align: center;
    display: block;
}
.bookingHaus2026 .bookinginfo2026{
        text-align: center;
}

#langwahl {
  display: block;
  text-align: center;
  border: var(--orange2) solid;
  border-radius: 0px;
  background-color: var(--weiss);
  padding: 10px;
  color: var(--schwarz);
}

#langwahl p {
  color: var(--schwarz);
}

#langwahl label {
  display: block;
}

#angebots-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

#angebots-content > * {
  flex: 1 1 0%;
  max-width: 100%;
}

#angebots-content hr {
  color: var(--green1);
}

haus {
  color: var(--green2);
  font-size: 24px;
  font-weight: bold;
}

.buchButton2026 {
  text-align: center;
}

.buchButton2026 p {
  line-height: 0.9;
}

.buchButton2026 #myBtn {
  padding: 15px 30px;
  width: 100%;
  border-radius: 0px;
}

#preisStep2 {
  color:var(--orange2);
  font-size: 25px;
}

.bookinginfo2026 {
  margin-top: 10px;
}

.bookingHaus2026 {
  padding: 20px;
  border: 1px solid var(--green1);
  border-radius: 0px;
  margin-bottom: 10px;
  margin-top: 10px;
  background: var(--hintergrund);
  max-width: 50%;
}

.bookingHaus2026 img {
  max-width: 320px;
  width: 100%;
}

.custom-number-input {
  display: flex;
  align-items: center;
  border: 2px solid var(--hintergrund);
  width: fit-content;
  border-radius: 2px;
  overflow: hidden;
}

.custom-number-input button,
.custom-number-input input {
  border: medium;
  background: var(--green2);
  height: 40px;
  width: 50px;
  text-align: center;
  font-size: 20px;
  outline: none;
  margin: 0px;
}

.custom-number-input input {
  background: var(--permaweiss);
  border-left: 1px solid rgb(204, 204, 204);
  border-right: 1px solid rgb(204, 204, 204);
  appearance: textfield;
}

.custom-number-input input::-webkit-outer-spin-button,
.custom-number-input input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0px;
}

.custom-number-input button:hover {
  background-color: var(--green1);
  cursor: pointer;
}

#personenanzahl_container,
#haustiereanzahl_container {
  margin-bottom: 30px;
}

.weiterBuchenZusatzleistungen label span {
  font-size: 0.85em;
  font-weight: normal;
  color: rgb(102, 102, 102);
  margin-left: 5px;
}

#personenanzahl_container {
  margin-bottom: 25px;
}

.weiterBuchen.step3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.step3 .holderBuchenWeiter {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.holderBuchenWeiter h2{
	margin-top: 0 !important;
}

.holderBuchenWeiter label,
.holderBuchenWeiter span,
.holderBuchenWeiter b{
	color: var(--schwarz) !important;
}

#Gesamtpreis {
  font-weight: bold;
}

#greenErrorfield .fehler {
  text-shadow: -1px -1px 0 var(--permaweiss), 1px -1px 0 var(--permaweiss), -1px 1px 0 var(--permaweiss), 1px 1px 0 var(--permaweiss);
  padding: 0px;
  display: none;
  color: red;
  font-size: 18pt;
  font-weight: bold;
  line-height: 20pt;
}

.weiterBuchen {
  display: flex;
  justify-content: space-between;
}

.weiterBuchenDetails {
  border: var(--permagrau) solid;
  border-radius: 0px;
  padding: 20px;
  max-width: 320px;
  min-width: 300px;
  margin-top: 10px;
}

.weiterBuchenDetail .btn-text {
    color: var(--permaschwarz) !important;
}

.weiterBuchenDetail .btn-text:hover{
      color: var(--permaweiss) !important;
}

.weiterBuchenPersonen {
  background: var(--img-personen) 0% 50% no-repeat;
  display: block;
  text-align: right;
  max-width: 300px;
}

.weiterBuchenHund {
  background: var(--img-hund) 0% 50% no-repeat;
  display: block;
  text-align: right;
  max-width: 300px;
}

.weiterBuchenTermin {
  background: var(--img-planner) 2% 50% no-repeat;
  display: block;
  text-align: right;
  max-width: 300px;
}

.weiterBuchenHaus {
  background: var(--img-haus) 2% 50% no-repeat;
  display: block;
  text-align: right;
  max-width: 300px;
}

.weiterBuchenAnzahlung,
.weiterBuchenBasispreis,
.weiterBuchenHaustiere,
.weiterBuchenGesamtpreis {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.weiterBuchenDetail {
  max-width: calc(100% - 321px);
  border: var(--permagrau) solid;
  border-radius: 0px;
  margin-top: 10px;
  padding: 20px;
  margin-left: 10px;
  color: var(--text);
  width: 100%;
}

.weiterBuchenInkl {
  margin-top: 10px;
}

.weiterBuchenInkl ul {
  margin-top: 0px;
  margin-left: 42px;
}

.weiterBuchengross {
  max-width: 100%;
  border: var(--permagrau) solid;
  border-radius: 7px;
  margin-top: 10px;
  padding: 20px;
  color: var(--text);
}

.holderBuchenWeiter select,
#langwahl select {
  color: var(--permaschwarz);
  margin-right: 10px;
  text-align: left;
  text-decoration: none;
  font-size: 14px;
  border: 1px solid rgb(133, 133, 133);
  border-radius: 3px;
  background-image: url("/wp-content/uploads/anderles/icons/arrow_down.webp");
  background-position: 97% 50%;
  background-repeat: no-repeat;
  appearance: none;
  display: inline-block;
  min-width: 200px;
  background-color: var(--permaweiss);
  margin-top: 20px;
}


.holderBuchenWeiter input#booking-calendar {
  padding: 1px 7px 2px;
  background: var(--permaweiss);
  color: var(--permaschwarz);
  border: 1px solid rgb(133, 133, 133);
  border-radius: 3px;
  max-width: 250px;
  margin: 0px;
}

.holderBuchenWeiter {
  display: inline-grid;
  margin: 20px 0;
}

.holderBuchenInput {
  width: 250px;
  line-height: 2;
}

.holderBuchenInputlang {
  width: 250px;
  height: 100px;
}

.haltelinks {
  display: block !important;
}

.holderBuchenWeiter.RegelTiere {
	text-align: justify !important;
	display: block;
	word-break: normal;      
	hyphens: auto;           
	-webkit-hyphens: auto;    
	-ms-hyphens: auto;        
	}

#payment_info_box {
  background: var(--card-bg) !important;
  border-left: 4px solid var(--green2) !important;
}

.anderles-agb-details {
  background: var(--card-bg);
  border-width: 1px 1px 1px 4px;
  border-style: solid;
  border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) var(--green2);
  padding: 12px;
  margin-top: 20px;
  border-radius: 4px;
}

.anderles-agb-details summary {
  font-weight: bold;
  cursor: pointer;
  padding: 10px;
  list-style: none;
}

.anderles-agb-content {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgb(238, 238, 238);
  font-size: 14px;
}

.anderles-agb-content.lang-de #aktuelleAgb {
  display: block !important;
}

.anderles-agb-content.lang-en #aktuelleAgben {
  display: block !important;
}

.agb-checkbox-wrap {
  margin-top: 20px;
  padding: 15px;
  background: var(--card-bg);
  border: 1px solid rgb(204, 229, 204);
  border-radius: 4px;
}

.select-payment-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.select-item h2 {
  margin-bottom: 10px;
}

.anderles-checkout-wrapper {
  width: 100%;
  max-width: 800px;
  margin: 0px auto;
  text-align: left;
}

.anderles-checkout-title {
  margin-bottom: 30px;
  text-align: center;
}

.anderles-checkout-intro {
  text-align: center;
  margin-bottom: 30px;
}

.anderles-checkout-block {
  background: var(--weiss);
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid rgb(221, 221, 221);
  overflow: hidden;
}

.anderles-checkout-block-inner {
  padding: 20px;
}

.anderles-checkout-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgb(204, 204, 204);
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.anderles-checkout-subtitle {
  margin: 0px;
}

.anderles-checkout-edit-btn {
  background: var(--green2);
  color: var(--permaweiss);
  border: 1px solid rgb(51, 51, 51);
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.9em;
  transition: background-color 0.2s;
}

.anderles-checkout-edit-btn:hover {
  background-color: rgb(234, 234, 234);
}

.anderles-checkout-img-wrap {
  width: 100%;
  max-height: 250px;
  overflow: hidden;
  background-image: url("/wp-content/uploads/anderles/Buchen/buchungsbanner.webp");
}

.anderles-checkout-img {
  width: 98%;
  max-width: 305px;
  height: auto;
  object-fit: cover;
  display: block;
  margin: 6px auto 10px;
  border-color: var(--schwarz);
  border-style: solid;
  border-width: 2px;
}

.anderles-checkout-list {
  margin-top: 5px;
  padding-left: 20px;
  color: var(--schwarz) !important;
}

.anderles-checkout-spacing {
  margin-top: 15px;
}

.anderles-checkout-spacing-small {
  margin-top: 10px;
}

.anderles-checkout-price-block {
  background: var(--weiss);
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
  border: 1px solid rgb(221, 221, 221);
}

.anderles-checkout-price-block span,
.anderles-checkout-block p {
  color: var(--schwarz);
}

.anderles-checkout-price-header {
  margin: 0px 0px 15px;
  border-bottom: 1px solid rgb(195, 230, 195);
  padding-bottom: 10px;
}

.anderles-checkout-price-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.anderles-checkout-price-total {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 2px solid rgb(51, 51, 51);
  font-size: 1.2em;
  font-weight: bold;
}

.anderles-checkout-price-prepayment {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  border-left: 5px solid var(--green2) !important;
  border-radius: 0px !important;
}

.anderles-checkout-price-prepayment span {
  color: var(--green2);
}

.anderles-checkout-submit-wrap {
  text-align: center;
}

.anderles-checkout-submit-btn {
  font-size: 1.2em;
  padding: 15px 30px;
  background-color: rgb(76, 175, 80);
  border: medium;
  border-radius: 0px;
  cursor: pointer;
  transition: background-color 0.2s;
  color: var(--permaschwarz);
}

.anderles-checkout-submit-btn:hover {
  background-color: rgb(69, 160, 73);
  color: var(--permaweiss);
}

.anderles-checkout-final-container {
  max-width: 850px;
  margin: 0px auto;
  font-family: sans-serif;
  color: rgb(51, 51, 51);
  background: rgb(255, 255, 255);
  padding: 30px;
  border-radius: 12px;
  box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 20px;
  text-align: left;
}

.anderles-header {
  text-align: center;
  margin-bottom: 35px;
}

.anderles-success-circle {
  width: 60px;
  height: 60px;
  background: rgb(232, 245, 233);
  color: rgb(46, 125, 50);
  line-height: 60px;
  border-radius: 50%;
  font-size: 30px;
  margin: 0px auto 15px;
  text-align: center;
}

.anderles-header h2 {
  color: rgb(46, 125, 50);
  margin: 0px;
}

.anderles-header p {
  color: rgb(102, 102, 102);
}

.anderles-flex-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.anderles-column {
  flex: 1 1 0%;
  min-width: 300px;
  padding: 25px;
  border-radius: 10px;
}

.anderles-details-box {
  background: rgb(248, 249, 250);
}

.anderles-payment-box {
  background: rgb(255, 253, 231);
  border: 1px solid rgb(255, 245, 157);
}

.anderles-column h3 {
  margin-top: 0px;
  font-size: 18px;
  border-bottom: 1px solid rgb(221, 221, 221);
  padding-bottom: 10px;
}

.anderles-details-box h3 {
  color: rgb(46, 125, 50);
}

.anderles-payment-box h3 {
  color: rgb(245, 127, 23);
  border-bottom-color: rgb(255, 224, 130);
}

.anderles-price-total {
  font-size: 18px;
  margin-top: 15px;
}

.anderles-price-downpayment {
  font-size: 24px;
  margin: 15px 0px;
}

.anderles-btn-bank {
  display: block;
  background: rgb(25, 118, 210);
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  margin-top: 15px;
}

.anderles-btn-back {
  color: rgb(46, 125, 50);
  font-weight: bold;
  text-decoration: none;
  font-size: 16px;
}

.anderles-qr-container {
  margin-top: 30px;
  display: flex;
  align-items: center;
  background: rgb(241, 243, 245);
  padding: 25px;
  border-radius: 10px;
}

.anderles-qr-image {
  background: white;
  padding: 10px;
  border: 1px solid rgb(221, 221, 221);
  border-radius: 5px;
}

.anderles-manual-info {
  margin-left: 25px;
}

.anderles-manual-info h4 {
  margin: 0px 0px 10px;
}

.anderles-manual-info p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0px;
}

.anderles-highlight-vwz {
  color: rgb(211, 47, 47);
}

.anderles-footer-nav {
  text-align: center;
  margin-top: 40px;
}

@media (max-width: 1000px) {
  #angebots-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  #angebots-content {
    grid-template-columns: repeat(1, 1fr);
  }
  #angebots-content > * {
    max-width: 100%;
  }
}

@media (max-width: 790px) {
  .weiterBuchen {
    display: block;
  }
  .weiterBuchenDetails {
    max-width: 100%;
    min-width: 150px;
  }
  .weiterBuchenDetail {
    max-width: 100%;
    margin-left: 0px;
  }
  #booking_out {
    display: block;
  }
}

@media (max-width: 499px) {
  .anderles-qr-container {
    display: block;
  }
  .anderles-checkout-final-container {
    padding: 0px;
  }
  .anderles-column {
    min-width: 200px;
  }
}

@media (max-width: 399px) {
  .holderBuchenInput,
  .holderBuchenInputlang {
    max-width: 250px;
    width: 90%;
  }
  .anderles-checkout-header {
    display: block;
  }
  .anderles-checkout-img {
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .weiterBuchengross {
    padding: 0px;
  }
  .holderBuchenWeiter.haltelinks {
    margin: 0px;
  }
}

.progress-container {
  width: 100%;
  background-color: rgb(243, 243, 243);
  border-radius: 10px;
  overflow: hidden;
  height: 20px;
  margin: 0px;
}

.progress-bar {
  height: 100%;
  width: 0px;
  background-color: var(--green1);
  animation: 10s ease-in-out infinite fillProgress;
  border-radius: 10px;
}

#kontaktForm{
    text-align: center!important;
}

#kontaktForm #cal-wrap #booking-calendar{
    padding: 0 15px !important;    

}

#kontaktForm  .holderBuchenWeiter select {
    margin: 0 !important;
}

#kontaktForm input,
#kontaktForm select,
#kontaktForm #cal-wrap #booking-calendar,
#kontaktForm textarea{
    background: var(--card-bg) !important;
    color: var(--schwarz) !important;
    border: 1px solid var(--green2) !important;
    border-radius: 0px !important;
    padding-left: 15px !important;
    max-width: 220px;
    
}

#weiterBuchengross #kontaktForm .holderBuchenWeiter label[for="flex_date_check"] {
    margin: 0 auto 0 0 !important;
}

#kontaktForm .holderBuchenWeiter #flex_date_check{
    margin: 0 0 0 auto !important;  
}

.anderles-buchen-wrapper #langwahl #language-select{
    background: var(--card-bg) !important;
    color: var(--schwarz) !important;
    padding: 10px;
    text-align: center;
    
}

@keyframes fillProgress {
  0% {
    width: 0%;
  }
  50% {
    width: 50%;
  }
  100% {
    width: 100%;
  }
}