/*!
Theme Name: switzerlan
Author: Bojett
Author URI: https://bojett.com/
Description: WordPress Theme for the biggest LAN Party in Switzerland, SwitzerLAN.
Version: 1.0.0
Text Domain: switzerlan
*/

@import "/wp-content/themes/switzerlan/style-liquid.css";

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* {
	padding: 0;
	margin: 0;
	border: 0;
}

::-moz-selection {
    background: #d11c19;
    color: white;
}

::selection {
    background: #d11c19;
    color: white;
}

@font-face {
	font-family: 'Big Macca';
	src: url('/wp-content/themes/switzerlan/fonts/bigmacca.otf.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

:root {
	--bg-color: #181818;
	--sponsoring-bg-color: #1d1c1c;
	--sponsoring-bar-height: 56px;
	--header-bar-height: 52px;
    --header-padding: 0 40px;
    --font-size-h1: 3.9rem;
    --font-size-h2: 2.5rem;
    --font-size-h3: 1.8rem;
    --font-size-h4: 1.5rem;
    --font-size-h5: 1.2rem;
    --font-size-h6: 1.0rem;
    --font-size-p: 1.2rem;
    --font-size-startpageteaser: 2.5rem;
    --countdown-labels: 1rem;
    --countdown-separator: 3rem;
    --countdown-numbers: 3.5rem;
    --scifibar-home-top: 10rem;
    --scifibar-top: 13rem;
}

html, body {
    margin: 0;
}

body {
	background-color: var(--bg-color);
	font-family: "Roboto", Arial, sans-serif;
	display: flex;
    flex-direction: column;
    min-height: 100vh;
	max-width: 4800px;
	overflow-x: hidden;
}

#switzerlan-website {
	max-width: 2480px;
	padding: var(--header-padding);
	margin: auto;
    flex: 1 0 auto;
	width: calc(100% - 80px);
}

.switzerlan-frontpage {
	max-width: 2480px;
	padding: var(--header-padding);
	margin: auto;
    flex: 1 0 auto;
	width: calc(100% - 80px);
}

.fullscreen-video.wp-block-cover {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.home .entry-content {
    /*position: absolute;*/
    /*top: -28rem;*/
    width: 100%;
}

.fullscreen-home {
    position: relative;
    width: 100%;
}


.sponsoring-logos {
	background-color: var(--sponsoring-bg-color);
	height: var(--sponsoring-bar-height);
}

.sponsoring-inner {
	display: flex;
	justify-content: center;
	gap: 30px;
    pointer-events: all;
}

.sponsor-img-normal {
	height: 32px;
	width: auto;
	margin: 12px;
	
	transition: 0.3s all ease-in;
}

.logo-white-invert {
    filter: brightness(0) invert(1);
}

.sponsor-img-normal:hover {
    opacity: 0.7;
}

.sponsor-img-normal:hover.logo-white-invert {
    filter: brightness(0) invert(1); 
}


#logo-header img {
	width: 242px;
	height: 20px;
}

div#header-group {
    pointer-events: none;
    display: flex; 
    justify-content:space-between; 
    align-items: baseline;
    width: 100%;
    /*position: fixed;*/
    z-index: 2;
}

header#header-wrap {
    position: fixed;
    z-index: 9999;
    right: 0;
    left: 0;
    top: 0;
    pointer-events: none;
}

/*header#header-wrap > #header-group > * {
    /*pointer-events: auto;*/
/*}*/

header#header-left {
	/*position: sticky;
	z-index: 9999;*/
	max-width: 2480px;
	padding: var(--header-padding);
	top: 5px;
	box-sizing: border-box;
	width: fit-content;
    margin: unset;
    pointer-events: none;
}

header#header-left > * {
	pointer-events: auto;
}



header#header-right {
	/*position: sticky;
	z-index: 2;*/
	max-width: 2480px;
	padding: var(--header-padding);
	top: 5px;
	box-sizing: border-box;
	top: 100px;
	width: fit-content;
    margin-left: auto;
    pointer-events: none;
    align-items: center;
} 

header#header-right > * {
	pointer-events: auto;
}


aside#sidebar-left {
	top: 100px;
	z-index: 1;
	/*display: contents;*/
	width: fit-content;
	margin-bottom: 30px;
	left: 0;
    pointer-events: none;
}

aside#sidebar-left  section > * {
    pointer-events: auto;
}

aside#sidebar-right {
	top: 100px;
	z-index: 1;
	/*display: contents;*/
	margin-top: 20px;
	margin-bottom: 30px;
	right: 0;

}

#sidebar-left #sidebar-left-wrapper {
	display: flex;
	justify-content: space-between;
	margin-top: 30px;
	width: fit-content;
}

#sidebar-left #sidebar-left-wrapper #sidebar-left-wrapper-inner {
	margin-top: -9px;
}

.spacer-line {
	border-top: 1px solid white;
	width: 30px;
	padding-bottom: 8px;
}

.lan-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.lan-info-icon {
	background-color: white;
	padding: 10px;
	height: 30px;
	width: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lan-info-icon i {
	color: var(--bg-color);
	font-size: 22px;
}

.lan-info-text {
	color: white;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	max-width: 138px;
	line-height: 0.8rem;
	letter-spacing: 0.3px;
}

.quest-btn {
	float: right;
}

main {
	width: 70%;
	margin: 15rem auto 20vh auto;
}


#main-content {
	position: sticky;
	z-index: 1;
	padding-bottom: 60px;
}



h1 {
	font-family: 'Big Macca', sans-serif;
	color: white;
	font-size: var(--font-size-h1);
	margin-bottom: 3rem;
	text-align: center;
	text-transform: uppercase;
	justify-content: center;
	display: flex;
	align-items: center;
	text-align: center;
	gap: 20px;
    font-weight: normal;
}


h1::before,
h1::after {
	flex-shrink: 0;
	content: "";
	height: 2px;
	width: 3.9rem;
	background: white;
}

h2, h3, h4, h5, h6 {
    font-family: 'Big Macca', sans-serif;
    color: white;
	margin: auto;
    gap: 15px; 
    font-weight: normal;
}

h2 {
    font-size: var(--font-size-h2); 
    margin-bottom: 3.1rem;
    text-transform: uppercase; 
    letter-spacing: 1px; 
}

h3 {
    font-size: var(--font-size-h3); 
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

h4 {
    font-size: var(--font-size-h4);
    margin-top: 3rem;
    margin-bottom: 0px;
    text-transform: uppercase;
    opacity: 0.95;
}

h5 {
    font-size: var(--font-size-h5);
    margin-top: 2.5rem;
    margin-bottom: 0;
    text-transform: uppercase; 
    font-weight: normal; 
}

h6 {
    font-size: var(--font-size-h6);
    margin-top: 2rem;
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 2px; 
    opacity: 0.7; 
}

.is-layout-flow {
	margin: auto;
	max-width: 80%;
}

.is-layout-flow.alignfull {
	width: 100%;
	max-width: 4200px;
}

.wp-block-media-text__content .wp-block-heading {
	margin-top: 0;
}

.wp-block-cover {
	z-index: 0;
	/*margin-bottom: 16px;*/
}

.wp-block-cover .wp-block-heading {
    margin-top: 0;
}

.wp-block-cover h1.wp-block-heading {
    margin-bottom: 0;
}

.wp-block-cover h2 {
    margin-bottom: 0;
}

.is-layout-constrained > h2:where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: 100%;
}



.wp-block-cover p {
    margin: auto;
	margin-top: 25px;
	margin-bottom: 25px;
}

.hightlight-boxing :where(.wp-block-columns.is-layout-flex) {
	gap: 1rem;
	margin-bottom: 1rem;
}

.hightlight-boxing .wp-block-cover {
    margin-bottom: 0;
} 

#main-header {
	margin: 20px 0 20px 0;
	height: var(--header-bar-height);
	display: flex;
	justify-content: space-between;
	align-items: center;
	/*position: relative;*/
	z-index: 100;
}

#navigation-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: rgba(255, 69, 0, 1);
	backdrop-filter: blur(4px);
	clip-path: polygon(18px 0,
			100% 0,
			100% 100%,
			0 100%,
			0 18px);
    border: 1px solid red;
}

#navigation-header::after {
	content: "";
	position: absolute;
	inset: 1px;
	z-index: -1;
	backdrop-filter: blur(4px);
	background: linear-gradient(0deg, rgba(64, 20, 20, 0.8) 0%, rgba(158, 11, 11, 0.8) 100%);
	clip-path: polygon(18px 0,
			100% 0,
			100% 100%,
			0 100%,
			0 18px);
    height: 54px;
}

#navigation-header {
	position: relative;
	height: 54px;
	display: flex;
	align-items: center;
	padding-left: 20px;
	padding-right: 20px;
	/* pace links */
	padding-bottom: 1px;
	width: fit-content;
    border-bottom: red 1px solid;
}

#navigation-header ul {
	list-style: none;
	display: flex;
	gap: 20px;
	padding-top: 1px;
	align-items: center;
}

#navigation-header ul li {
	font-size: 16px;
	font-weight: bold;
	color: #ffffff;
	text-transform: uppercase;
	cursor: pointer;
	position: relative;
	padding: 10px 0;
}

#navigation-header ul li a {
	color: #ffffff;
	text-decoration: none;
    text-wrap: nowrap;
}

#navigation-header ul li .game-btn {
	height: 20px;
}

.icon-link {
	font-size: 20px;
	font-weight: normal;
	transition: 0.3s ease opacity, transform 0.1s ease;
}

.icon-link:hover {
	opacity: 0.8;
}

.icon-link:active {
	transform: scale(0.98);
}

.btn-red {
	background: linear-gradient(0deg, #6a1010 0%, #f90000 100%);
}

.btn-black, .btn-menu-link {
	background: linear-gradient(0deg, #000000 0%, #333333 100%);
}

#header-right #navigation-header #primary-menu .btn-menu-link {
	display: inline-block;
	padding: 14px 22px;
}

.nocorners, .no-corners {
	--cut-small: 1rem;
	--cut-large: 2rem;
	clip-path: polygon(var(--cut-small) 0,
			calc(100% - var(--cut-small)) 0,
			100% var(--cut-small),
			100% calc(100% - var(--cut-large)),
			calc(100% - var(--cut-large)) 100%,
			var(--cut-small) 100%,
			0 calc(100% - var(--cut-small)),
			0 var(--cut-small));
}

.game-btn, .btn-menu-link {
	--cut-small: 8px;
	--cut-large: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 14px 22px;
	border: none;
	cursor: pointer;
	font-weight: 600;
	font-size: 16px;
	color: white;
	text-transform: uppercase;
	clip-path: polygon(var(--cut-small) 0,
			calc(100% - var(--cut-small)) 0,
			100% var(--cut-small),
			100% calc(100% - var(--cut-large)),
			calc(100% - var(--cut-large)) 100%,
			var(--cut-small) 100%,
			0 calc(100% - var(--cut-small)),
			0 var(--cut-small));
	transition: opacity 0.3s ease, transform 0.1s ease;
	filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

.btn-menu-link a {
    margin: -22px;
    padding: 22px;
}

.game-btn:hover, .btn-menu-link:hover {
	opacity: 0.8;
	filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.4));
}

.game-btn:active, .btn-menu-link:active {
	transform: scale(0.98);
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

.game-btn .icon {
	font-size: 1.3em;
	font-weight: bold;
	margin-top: -2px;
}

ul.socialmedia-buttons {
	list-style: none;
	margin-top: 30px;
	width: fit-content;
}

ul.socialmedia-buttons li {
	margin-top: 19px;
	transition: opacity 0.3s ease, transform 0.1s ease;
}

ul.socialmedia-buttons li a {
	color: white;
	font-size: 26px;
	text-decoration: none;
}

ul.socialmedia-buttons li a:hover {
	opacity: 0.8;
}

ul.socialmedia-buttons li:active {
	transform: scale(0.98);
}

footer {
	background: #F30101;
	background: url('/wp-content/themes/switzerlan/images/footer-cable.png'), linear-gradient(90deg, rgba(243, 1, 1, 1) 0%, rgba(77, 18, 18, 1) 100%);
	background-position: center center; /* Zentriert das Bild */
    background-repeat: no-repeat;       /* Verhindert, dass das Bild sich kachelartig wiederholt */
    background-size: cover;
	flex-shrink: 0;
}

footer #footer-inner {
	padding: 60px;
	max-width: 1920px;
	margin: auto;
}

footer #footer-navigation ul {
	list-style: none;
	display: flex;
	gap: 80px;
	justify-content: center;
	margin-bottom: 20px;
}

footer #footer-navigation ul li {
	font-size: 18px;
}

footer #footer-navigation ul li a {
	color: white;
	text-decoration: none;
}

footer #footer-center {
	margin-top: 60px;
	text-align: center;
}

footer #footer-center #footer-logo {
	width: 242px; 
	height: 20px;
}

footer #footer-center-text {
	margin-top: 12px;
	margin-bottom: 60px;
	font-size: 14px;
	color: white;
	line-height: 1.6rem;
}

footer #footer-copyright {
	font-size: 12px;
	color: white;
	text-align: center;
	line-height: 1.2rem;
}

footer #footer-copyright a {
	color: white;
	text-decoration: none;
	font-weight: bold;
}

#socialmedia-buttons-footer {
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 12px;
}

#socialmedia-buttons-footer a {
	color: white;
	text-decoration: none;
	font-size: 20px;
}

/* Start Clan Benefits Section */

.clan-benefits {
	display: grid;
  gap: 1rem;
}

.benefit-box {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
align-items: center;
  display: flex;
  padding: 12px;
  width: 22rem;
}

.benefit-box .wp-block-media-text {
	width: 100%;
	margin-left: 15px;
}

:where(.wp-block-columns.is-layout-flex) {
	gap: 1rem;
} 

.benefit-box .wp-block-media-text__media {
	padding: 5px;
}

.benefit-box .title-benefits {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 0.95em;
	margin: 0 0 5px 0;
}

.benefit-box .benefits-size-title {
	display: inline-block;
	background: #d91e1e;
	color: #fff;
	font-size: 0.78em;
	font-weight: 700;
	text-transform: uppercase;
	padding: 2px 9px;
	border-radius: 10px;
	margin: 0 0 6px 0;
}

.benefits-box {
    width: 100%;
    max-width: 1150px;
}

.benefit-box p.benefits-desc {
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.83em;
	line-height: 1.4;
	margin: 0;
}

/* Bei ungerader Anzahl Benefit-Boxen bleibt eine Zeile mit nur einer Box
   (statt zwei) übrig, ausserdem oft eine komplett leere Zeile danach.
   Zielt anhand des tatsächlichen Inhalts (Anzahl .benefit-box je Zeile),
   nicht anhand der Position, da die letzte Zeile im Markup oft leer ist.
   !important nötig, da WordPress' Block-CSS (flex-grow:1) sonst Vorrang hat. */

/* Komplett leere Zeile (keine einzige .benefit-box) ausblenden */
.wp-block-columns.benefits-box:not(:has(> .benefit-box)) {
	display: none !important;
}

/* Zeile mit genau einer .benefit-box: Platzhalter-Spalte ausblenden, Box zentrieren */
.wp-block-columns.benefits-box:has(> .benefit-box):not(:has(> .benefit-box ~ .benefit-box)) {
	justify-content: center !important;
}

.wp-block-columns.benefits-box:has(> .benefit-box):not(:has(> .benefit-box ~ .benefit-box)) > .wp-block-column:not(.benefit-box) {
	display: none !important;
}

.wp-block-columns.benefits-box:has(> .benefit-box):not(:has(> .benefit-box ~ .benefit-box)) > .benefit-box {
	flex: 0 1 48% !important;
	width: 48% !important;
	max-width: 48% !important;
}

@media (max-width: 781px) {
	.wp-block-columns.benefits-box:has(> .benefit-box):not(:has(> .benefit-box ~ .benefit-box)) > .benefit-box {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* End Clan Benefits Section */


p {
	/*max-width: 660px;*/
    font-size: var(--font-size-p);
	color: white;
    line-height: 1.8rem;
}

.entry-content {
	color: white;
}

.wp-block-group.is-content-justification-left {
    padding-left: 25px;
    padding-right: 25px;
}

.wp-block-group > p {
    max-width: 660px;
    font-size: 18px;
    line-height: 150%;
    margin: auto;
}

@media (max-width: 2144px) {

	body .red-gradient-stitch .wp-block-list li {
		font-size: 16px;
	}
}

@media (max-width: 1600px) {
	body main {
		width: 90%;
	}
}

p.startpage-teaser {
    font-size: var(--font-size-startpageteaser);
}

.external-menu-link a::after {
    content: "\f35d"; /* Unicode für das 'external-link-alt' Icon */
    font-family: "Font Awesome 5 Free"; /* Bei Version 6: "Font Awesome 6 Free" */
    font-weight: 900; /* Wichtig: Solid Icons benötigen oft weight 900 */
    margin-left: 0.5em; /* Kleiner Abstand zum Text */
    font-size: 0.9em; /* Optionale Größenanpassung */
    text-decoration: none; /* Verhindert Unterstreichung des Icons */
    display: inline-block;
}






		.switzerlan-scifi-panel {
    /* Du kannst diese Werte anpassen, um die Kanten steiler oder flacher zu machen */
    --corner-cut: 40px;      /* Grösse der abgeschrägten Ecken */
    --notch-depth: 18px;     /* Tiefe der seitlichen Einbuchtung */
    --notch-length: 60px;    /* Länge der geraden Strecke innerhalb der Einbuchtung */
    --notch-angle: 20px;     /* Länge der Schräge, die in die Einbuchtung führt */
    
    /* Wichtig für Cover-Blöcke, damit keine Ränder überstehen */
    overflow: hidden;
    position: relative;
    border: none;
}

/* * PANEL LINKS (Box 01)
 * Hat Einbuchtung nur auf der linken Seite, relativ weit oben.
 */
.switzerlan-panel-left {
    /* Position der Einbuchtung von oben gemessen (passend zur Vorlage) */
    --notch-top: 150px; 

    clip-path: polygon(
        /* 1. Oben Links */
        var(--corner-cut) 0, 
        /* 2. Oben Rechts */
        calc(100% - var(--corner-cut)) 0, 
        100% var(--corner-cut), 
        /* 3. Rechts (komplett gerade nach unten) */
        100% calc(100% - var(--corner-cut)), 
        /* 4. Unten Rechts */
        calc(100% - var(--corner-cut)) 100%, 
        /* 5. Unten Links */
        var(--corner-cut) 100%, 
        0 calc(100% - var(--corner-cut)), 
        
        /* 6. Einbuchtung Links (von unten nach oben gezeichnet) */
        0 calc(var(--notch-top) + var(--notch-length) + var(--notch-angle)), 
        var(--notch-depth) calc(var(--notch-top) + var(--notch-length)), 
        var(--notch-depth) var(--notch-top), 
        0 calc(var(--notch-top) - var(--notch-angle)), 
        
        /* 7. Zurück zum Start */
        0 var(--corner-cut)
    );
}

/* * PANEL RECHTS (Box 02 & 03)
 * Haben Einbuchtungen auf der linken UND rechten Seite, exakt mittig.
 */
.switzerlan-panel-right {
    clip-path: polygon(
        /* 1. Oben Links */
        var(--corner-cut) 0, 
        /* 2. Oben Rechts */
        calc(100% - var(--corner-cut)) 0, 
        100% var(--corner-cut), 
        
        /* 3. Einbuchtung Rechts (vertikal zentriert, von oben nach unten gezeichnet) */
        100% calc(50% - (var(--notch-length) / 2) - var(--notch-angle)),
        calc(100% - var(--notch-depth)) calc(50% - (var(--notch-length) / 2)),
        calc(100% - var(--notch-depth)) calc(50% + (var(--notch-length) / 2)),
        100% calc(50% + (var(--notch-length) / 2) + var(--notch-angle)),
        
        /* 4. Unten Rechts */
        100% calc(100% - var(--corner-cut)), 
        calc(100% - var(--corner-cut)) 100%, 
        /* 5. Unten Links */
        var(--corner-cut) 100%, 
        0 calc(100% - var(--corner-cut)), 
        
        /* 6. Einbuchtung Links (vertikal zentriert, von unten nach oben gezeichnet) */
        0 calc(50% + (var(--notch-length) / 2) + var(--notch-angle)), 
        var(--notch-depth) calc(50% + (var(--notch-length) / 2)), 
        var(--notch-depth) calc(50% - (var(--notch-length) / 2)), 
        0 calc(50% - (var(--notch-length) / 2) - var(--notch-angle)), 
        
        /* 7. Zurück zum Start */
        0 var(--corner-cut)
    );
}

.language-switcher a {
    text-decoration: none;
}

.language-switcher a.is-active {
    font-weight: bold;
    color: #b6b6b6 !important; /* Oder deine Markenfarbe */
    text-decoration: underline;
}


/* Hauptcontainer (Die Box an sich) */
details.wp-block-details {
    /* Größe & Abstände */
    width: 100%;
    max-width: 900px;
    margin-bottom: 20px;
    box-sizing: border-box;

    /* Typografie */
    font-family: 'Roboto', Arial, Helvetica, sans-serif;

    /* Dunkelroter Farbverlauf */
    background: linear-gradient(180deg, #9b1e15 0%, #5f1008 100%);

    /* Abgeschrägte Ecken (Bevel-Effekt) */
    clip-path: polygon(
        12px 0, 
        calc(100% - 12px) 0, 
        100% 12px, 
        100% calc(100% - 12px), 
        calc(100% - 12px) 100%, 
        12px 100%, 
        0 calc(100% - 12px), 
        0 12px
    );

    /* 3D-Rahmen-Effekt (Helles Rot oben, dunkler Schatten unten) */
    box-shadow: 
        inset 0px 2px 0px rgba(255, 100, 90, 0.3),
        inset 0px -2px 0px rgba(0, 0, 0, 0.6),
        inset 2px 0px 0px rgba(0, 0, 0, 0.2),
        inset -2px 0px 0px rgba(0, 0, 0, 0.2);

    /* Weiche Animation beim Öffnen */
    transition: all 0.3s ease;
}

/* Hover-Effekt für besseres Feedback */
details.wp-block-details:hover {
    background: linear-gradient(180deg, #a82218 0%, #6d1209 100%);
}

/* Der klickbare Header (Titel & Pfeil) */
details.wp-block-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px;
    cursor: pointer;
    color: #ffffff;
    list-style: none; /* Versteckt das Standard-Dreieck */
    outline: none;
}

/* Versteckt das Standard-Dreieck speziell in Safari/Chrome */
details.wp-block-details summary::-webkit-details-marker {
    display: none;
}

/* Der Titel-Text */
details.wp-block-details summary strong {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* Der Pfeil-Kreis (wird über CSS erzeugt) */
details.wp-block-details summary::after {
    content: '';
    display: block;
    min-width: 26px;
    height: 26px;
    border: 1.5px solid #ffffff;
    border-radius: 50%;
    margin-left: 20px;

    /* SVG-Icon für den Pfeil nach unten */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cpolyline points='19 12 12 19 5 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;

    /* Animation für die Drehung */
    transition: transform 0.3s ease;
}

/* Pfeil umdrehen, wenn die Box geöffnet ist */
details.wp-block-details[open] summary::after {
    transform: rotate(180deg);
}

/* Der Text-Inhalt (Paragraph) */
details.wp-block-details p {
    margin: 0;
    padding: 0 24px 24px 24px;
    color: #dfdfdf;
    font-size: 16px;
    line-height: 1.6;
}

p > a {
	color: white;
}



body.home .scifi-sidebar-container {
    top: var(--scifibar-home-top);
}

.scifi-sidebar-container {
    top: var(--scifibar-top);
}

body.home .scifi-sidebar {
    height: calc(100vh - var(--scifibar-home-top));
}

.scifi-sidebar {
    height: calc(100vh - var(--scifibar-top));
}

/* Sidebar Grundlayout - Jetzt SCHWEBEND */
.scifi-sidebar-container {
	position: absolute;
  z-index: 4;
  right: 40px;
 
  margin-right: -315px;
  display: none;
  bottom: 0;
}

.scifi-sidebar {
    /*position: sticky;*/
   
    width: 275px; /* Etwas breiter für die Schatten */
   
    background-color: transparent; /* Kein Hintergrund mehr! */
    border: none;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    color: #ffffff;
    overflow-y: auto; 
    z-index: 9999;
    margin-left: auto;
    /* WICHTIG: Erlaubt Klicks auf die Website DURCH die leeren Stellen der Sidebar */
    pointer-events: none; 
}

/* Macht die einzelnen Blöcke in der Sidebar wieder klickbar */
.scifi-sidebar > * {
    pointer-events: auto;
}

/* Header (Uhrzeit & Click on Map) */
.sidebar-header {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    color: #9a9a9a;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    
    /* Leichter Hintergrund, damit die Schrift beim Scrollen lesbar bleibt */
    background: rgba(0, 0, 0, 0.4);
    padding: 8px 12px;
    backdrop-filter: blur(4px);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
}

/* -------------------------------------
   MAP SECTION
-------------------------------------- */
.map-wrapper {
    background-color: #7ab3d6;
    padding: 1px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 160px, 8px 152px, 8px 120px, 0 112px);
    /* Echter Schatten für Clip-Path Elemente */
    filter: drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.6));
}

.map-inner {
    background-color: #000;
    min-height: 220px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 160px, 8px 152px, 8px 120px, 0 112px);
    display: flex;
}

.map-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
}

/* -------------------------------------
   QUESTS SECTION (Jetzt als schwebende Box)
-------------------------------------- */
.quests-container {
    flex-grow: 0;
    padding: 20px;
    
    /* Schwebender Sci-Fi Panel Effekt */
    background: rgba(15, 15, 15, 0.65);
    backdrop-filter: blur(10px); /* Verschwommener Hintergrund */
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    
    /* Abgeschrägte Ecken für das Panel selbst */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 20px 100%, 0 calc(100% - 20px));
    filter: drop-shadow(0px 8px 20px rgba(0, 0, 0, 0.5));
}

.quests-container h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 15px 0;
    letter-spacing: 0.5px;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.quest-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.quest-list li {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 500;
    color: #dedede;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quest-list li:hover {
    color: #ffffff;
    transform: translateX(4px); /* Kleine Hover-Animation */
}

/* Die leere Checkbox */
.scifi-checkbox {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 12px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='2,2 22,2 22,22 8,22 2,16' fill='none' stroke='%23aaaaaa' stroke-width='1.5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Aktiver Status */
.quest-list li.active {
    color: #ff3300;
    text-shadow: 0 0 8px rgba(255, 51, 0, 0.4); /* Leuchtkraft für schwebende Optik */
}

.quest-list li.active .scifi-checkbox {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='2,2 22,2 22,22 8,22 2,16' fill='rgba(255,51,0,0.1)' stroke='%23ff3300' stroke-width='2'/%3E%3Cpolyline points='7,12 11,16 18,7' fill='none' stroke='%23ff3300' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
}

/* -------------------------------------
   LOGIN SECTION
-------------------------------------- */
.login-wrapper {
    background-color: #ff3300;
    padding: 2px;
    clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 18px calc(100% - 30px), 0 calc(100% - 48px), 0 18px);
    
    /* Schatten für das schwebende Login-Bild */
    filter: drop-shadow(0px 10px 20px rgba(255, 51, 0, 0.3));
}

.login-inner {
    background-color: #111;
    min-height: 200px;
    clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 18px calc(100% - 30px), 0 calc(100% - 48px), 0 18px);
    display: flex;
}

.login-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
}


.switzerlan-timeline-wrapper {
        background-color: transparent;
        color: #ffffff;
        font-family: "Roboto", Arial, Helvetica, sans-serif; /* Nutzt automatisch die Theme-Schriftart */
        padding: 20px 0;
        max-width: 800px;
        margin: 0 auto;
    }

    .switzerlan-timeline {
        display: flex;
        flex-direction: column;
        gap: 20px;
        position: relative;
		z-index:0;
    }

    /* Die vertikale Linie im Hintergrund */
    .switzerlan-timeline::before {
        content: '';
        position: absolute;
        left: 24px; /* Zentriert hinter den Zahlen-Boxen */
        top: 10px;
        bottom: 10px;
        width: 3px;
        background-color: #333333;
        z-index: 1;
    }

    .timeline-step {
        display: flex;
        align-items: stretch;
        gap: 20px;
        position: relative;
        z-index: 2;
    }

    /* Die Nummerierungs-Box mit abgeschrägten Ecken */
    .step-number {
        background-color: #d13600; /* SwitzerLAN Rot/Orange */
        color: #ffffff;
        min-width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        font-size: 1.4rem;
        /* Cyberpunk/Gaming Look: Abgeschrägte Ecken */
        clip-path: polygon(15% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 15%);
        flex-shrink: 0;
        box-shadow: 0 4px 10px rgba(209, 54, 0, 0.3);
    }

    /* Die Content-Box für den Text */
    .step-content {
        background-color: #1a1a1a; /* Dunkelgrau passend zur Seite */
        padding: 15px 20px;
        border-left: 4px solid #d13600;
        width: 100%;
        /* Abgeschrägte Ecke unten rechts passend zu den Maps auf dem Bild */
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
        transition: transform 0.2s ease;
    }

    .step-content:hover {
        transform: translateX(5px);
        background-color: #222222;
    }

    .step-content h4 {
        margin: 0 0 8px 0;
        font-size: 1.2rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #ffffff;
    }

    .step-content p {
        margin: 0;
        color: #cccccc;
        line-height: 1.5;
        font-size: 0.95rem;
    }

    /* Mobile Anpassung: Linie ausblenden und kompakter machen bei sehr kleinen Screens */
    @media (max-width: 480px) {
        .switzerlan-timeline::before {
            display: none;
        }
        .timeline-step {
            flex-direction: column;
            gap: 10px;
            max-width: 90%;
        }
        .step-number {
            width: 50px;
        }
    }
	.map-view {
		gap: 40px;
	}

#primary-menu a {
    transition: 0.3s all ease;
}

#primary-menu a:hover, #primary-menu a:active {
    /*color: #b6b6b6;*/
    text-decoration: underline;
}

#primary-menu .current-menu-item a, #primary-menu .current-menu-parent a {
    /*color: #b6b6b6;*/
    text-decoration: underline;
}

.parallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


#mobile-navigation-icon {
    display: none;
}

#mobile-user-icon {
    display: none;
}

#logo-header-mobile {
    display: none;
}

#logo-header {
    display: inline-block;
}

.temp-box {
    display: none;
}

@media (max-width: 1200px) {
    :root {
        --header-padding: 0 20px;
        --font-size-h1: 3rem;
        --font-size-h2: 2.3rem;
        --font-size-h3: 1.6rem;
        --font-size-h4: 1.2rem;
        --font-size-h5: 1.0rem;
        --font-size-h6: 1.0rem;
        --font-size-p: 1.2rem;
        
        --countdown-labels: 1rem;
        --countdown-separator: 2rem;
        --countdown-numbers: 2.5rem;
    }

    /* Hide dekstop navgiation */
    #navigation-header > div {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-color: #181818;
        z-index: -1;
        align-items:center;
        background-image: url("data:image/svg+xml,%3Csvg class='mobile-bg-svg' viewBox='0 0 400 850' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='a' width='15' height='15' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Cpath fill='red' d='M0 0h7v15H0z'/%3E%3C/pattern%3E%3C/defs%3E%3Cpath fill='%23141415' d='M0 0h400v850H0z'/%3E%3Cpath fill='%231a1122' d='M250 0h150v35H215zM0 210l30 30v330L0 600zm400 220-30 30v230l30 30z'/%3E%3Cpath fill='red' d='M235 0h165v12H252zM0 222l12 21v325L0 590z'/%3E%3Cpath fill='url(%23a)' d='m400 455-35 25v190l35 35z'/%3E%3Cpath d='M10 10h215l20 14h145v416l-35 40v195l35 35v130H10V595l10-20V235l-10-20Z' fill='none' stroke='red' stroke-width='1.5'/%3E%3Cpath d='M16 16h206l20 14h142v408l-34 40v200l34 33v122H16V598l10-20V230l-10-18Z' fill='none' stroke='red' opacity='.25'/%3E%3Cpath fill='none' stroke='red' stroke-width='.5' opacity='.3' d='M2 2h396v846H2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: top center; /* Häftet die Grafik oben an */
    background-size: 100% auto;
            overflow: hidden;
            padding: 0rem 1.7rem;
  box-sizing: border-box;
    }
    .user-icon-navigation {
        display: none;
    }

    .language-switcher {
        display: inline-flex;
        gap: 10px;
    }

    

    body:not(.home) #navigation-header > div {
        top: 3.4rem;
    }

    #navigation-header > div > ul {
        display: block;
        padding: var(--header-padding);
        margin-top: 100px;
    }

    /* Hide left sidebar */
    #sidebar-left {
        display: none;
    }

    /* Hide right sidebar */
    #sidebar-right {
        display: none;
    }

    #header-right {
        display: flex;
        margin-top: 1rem;
        align-self: baseline;
    }

    .bottom-stick {
        position: fixed;
        bottom: 1rem;
        left: 3rem;
        display: unset;
    }

    /* Show burger menu icon */
    #mobile-navigation-icon {
        background-color: transparent;
        padding-top: 5px;
        display: inline-block;
    }

    #mobile-navigation-icon i {
        color: white;
        font-size: 28px;
        margin-left: -10px;
        margin-right: -10px;
    }

    header .temp-box {
        display: inline-block;
    }

    #mobile-user-icon {
        display: inline-block;
        /*position: absolute;
        top: -62px;
        left: -35px;*/
        margin-right: 20px;
    }

    #header-right #navigation-header #primary-menu .btn-menu-link {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    

    #mobile-user-icon i {
        color: white;
        font-size: 30px;
    }

    /*body header#header-left {
    }

    div#header-group {
        
    }*/
    div#header-group {
        align-items: center;
        padding: 0.5rem;
        box-sizing: border-box;
    }


}

@media (max-width: 600px) {
    :root {
        --header-padding: 0 20px;
        --font-size-h1: 2.5rem;
        --font-size-h2: 1.9rem;
        --font-size-h3: 1.4rem;
        --font-size-h4: 1.2rem;
        --font-size-h5: 1.2rem;
        --font-size-h6: 1.0rem;
        --font-size-startpageteaser: 1.6rem;

        --countdown-labels: 1rem;
        --countdown-separator: 1.7rem;
        --countdown-numbers: 2.2rem;
    }

    main {
        margin: 12rem auto 20vh auto;
    }

    .wp-block-group .wp-block-columns.map-view {
        max-width: 100%;
    }

    footer #footer-navigation ul {
        display: inline-block;
    }

    h1::before,
    h1::after {
        flex-shrink: 0;
        content: "";
        width: 0;
        background: transparent;
    }

    .startpage-teaser-container {
        align-items: flex-end !important;
        justify-content: center !important;
        min-height: 40rem !important;
    }

    .startpage-teaser-container .is-layout-flow {
        max-width: 100%;
    }

    p.startpage-teaser {
        max-width: 100%;
    }

    #header-right {
        display: flex;
        align-items: center;
    }

    .wp-block-group.is-content-justification-left {
        padding-left: 0;
        padding-right: 0;
    }

    .is-layout-flow {
        width: calc(100% - 40px);
        max-width: 100%;
    }

    #logo-header-mobile { 
        display: inline-block;   
    }

    #logo-header-mobile img {
        max-width: 55px;
        height: auto;
    }

    #logo-header {
        display: none;
    }
}






/* ==========================================================================
   Desktop-Ansicht (Popover Dropdown on Hover)
   ========================================================================== */
@media (min-width: 992px) {
    /* Hauptmenü ausrichten */
    #primary-menu {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #primary-menu > li {
        position: relative; /* ZWINGEND NOTWENDIG: Macht das LI zum Bezugspunkt für das absolute Sub-Menü */
        padding: 20px 15px; /* Vergrößert die Hover-Fläche, damit das Menü nicht sofort schließt */
    }

    #primary-menu a {
        text-decoration: none;
        color: #ffffff;
        font-weight: bold;
    }

    /* Das Sub-Menü (Popover) im Normalzustand (Versteckt) */
    #primary-menu .sub-menu {
        position: absolute;
        top: 100%; /* Positioniert das Popover direkt unter dem Hauptlink */
        left: 0;
        min-width: 220px;
        background-color: #1a1a1a; /* Dunkler Hintergrund */
        border-top: 3px solid #bf2126; /* Roter Akzent passend zum SwitzerLAN Design */
        padding: 0;
        margin: 0;
        list-style: none;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
        z-index: 9999; /* Stellt sicher, dass es über allen anderen Inhalten liegt */
        
        /* Animation & Verstecken */
        opacity: 0;
        visibility: hidden;
        transform: translateY(15px);
        transition: all 0.3s ease-in-out;
        pointer-events: none; /* Verhindert Klicks im versteckten Zustand */
    }

    /* Hover-Effekt: Zeigt das Popover an, wenn man über das Eltern-LI fährt */
    #primary-menu li.menu-item-has-children:hover .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto; /* Aktiviert Klicks wieder */
    }

    /* Styling der einzelnen Links im Popover */
    #primary-menu .sub-menu li {
        padding: 0;
        margin: 0;
    }

    #primary-menu .sub-menu li:last-child {
        border-bottom: none; /* Entfernt den Strich beim letzten Item */
    }

    #primary-menu .sub-menu li a {
        display: block;
        padding: 12px 20px;
        color: #dddddd;
        font-weight: normal;
        text-transform: none;
        transition: background-color 0.2s ease, padding-left 0.2s ease;
        white-space: nowrap;
        text-transform: uppercase;
    }

    #primary-menu .sub-menu li a:hover {
        background-color: #2a2a2a;
        color: #bf2126; /* Rote Schrift beim Hover im Sub-Menü */
        padding-left: 25px; /* Cooler kleiner Einrück-Effekt */
    }
}

/* ==========================================================================
   Mobile-Ansicht (Aufklappbares Akkordeon)
   ========================================================================== */
@media (max-width: 991px) {
    #primary-menu {
        list-style: none;
        padding: 0;
        margin: 0;
        display: block;
    }

    #primary-menu > li {
        position: relative;
    }

    #primary-menu a {
        display: block;
        color: #ffffff;
        text-decoration: none;
        font-weight: bold;
    }

    /* Sub-Menü initial ausblenden */
    #primary-menu .sub-menu {
        display: none; /* Versteckt auf Mobile */
        list-style: none;
        padding: 0;
        margin: -2.5rem 0 0 0;
        background-color: #1a1a1a; /* Etwas dunkler zur Abgrenzung */
        border-left: 4px solid #d13600;
        position: absolute;
        z-index: 99999;
        right: 0;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
    }

    #primary-menu .sub-menu li a {
        padding: 12px 20px 12px 20px; /* Weiter eingerückt für die Hierarchie */
        font-weight: normal;
        color: #aaaaaa;
        border-bottom: 1px solid #222;
    }

    /* CSS-Only: Zeigt das Sub-Menü bei Tap/Hover auf Mobile */
    #primary-menu li.menu-item-has-children:hover .sub-menu,
    #primary-menu li.menu-item-has-children:focus-within .sub-menu {
        display: block;
    }
}