/* =========================================================================
   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 {
        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 
       ========================================== */
    .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(--green2);
    }

    #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(--green2) !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 */
    }



/* ==========================================
       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;
    }

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

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

    #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 ; }
}