/* =========================================================================
   HEADER 400 - FINAL RESPONSIVE LAYOUT (Bis 500px)
   ========================================================================= */

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

@media (max-width: 500px) {

    .header2026-400-wrapper {
        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;
    }

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

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


    /* 3. Aktuelle Flagge ausblenden */
    .header2026-400-lang-box .sub-menu li.current-lang,
    .header2026-400-lang-box .sub-menu li.current-menu-item {
        display: none !important;
    }

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


}