/* Import Fraunces Font */
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/Fraunces-VariableFont_SOFT,WONK,opsz,wght.ttf') format('truetype');
}

/* Page-wide Styles */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
	    background-color: #1A1A1A;
    font-family: 'Fraunces', sans-serif;

}

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

main {
    flex: 1; /* This makes the main content take up the remaining space */
}

.krone-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    border: 1.6px solid #F9D53D; /* Thinner border */
    border-radius: 50%;
    margin-left: 8px;
    position: relative;
}

/* Tooltip container */
.krone-tooltip {
    position: absolute;
    left: calc(100% + 8px); /* Adds spacing between crown and text */
    top: 50%;
    transform: translateY(-50%);
    color: #F9D53D; /* Same yellow as the crown */
    font-size: 0.85em;
    font-weight: normal; /* Match surrounding text */
    white-space: nowrap;
    opacity: 0; /* Initially hidden */
    visibility: hidden;
    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
}

/* Hover effect: fade in */
.krone-container:hover .krone-tooltip {
    opacity: 1;
    visibility: visible;
}

.krone-icon {
    width: 75%;  /* Slightly enlarged */
    height: auto;
}




/* Style for the "Mehr anzeigen" button */
.story-unfurl-button {
    color: #F7931E; /* Text color */
    background: none; /* Remove button background */
    border: none; /* Remove button border */
    padding: 0; /* Remove padding */
    cursor: pointer;
    font-size: 100%; /* Keep the font size */
    font-family: 'Fraunces', sans-serif;
    font-variation-settings: 'opsz' 9, 'soft' 0, 'wght' 600;
    margin-top: 12px;
}

.story-unfurl-button:hover {
    color: #ffffff; /* Change the color on hover */
    text-shadow: none; /* Remove text shadow */
    text-decoration: none; /* Remove underline on hover */
}


/* Header Bar Styles */
.header-bar {
    height: auto;
    background-color: #1A1A1A;
    border-bottom: 5px solid #F9D53D;
    display: flex;
    align-items: center;
    padding: 0;
    position: relative;
}

.header-bar .logo img {
    height: 80px;
    margin: 20px 0 20px 20vw;
}

.header-bar nav {
    display: flex;
    align-items: center;
    margin-left: 50px;
}


.header-bar nav .menu-items {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.header-bar nav .menu-items li {
    margin-left: 50px;
}

.header-bar nav .menu-items li a {
    color: #F7931E;
    text-decoration: none;
    font-weight: bold;
    transition: text-shadow 0.6s;
	font-variation-settings: 'opsz' 9, 'soft' 0, 'wght' 550;
	font-size: 120%;
}

.header-bar nav .menu-items li a:hover {
    text-shadow: 0 0 5px #F7931E;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    margin-left: auto; /* Align to the right */
}

.hamburger span {
    height: 3px;
    width: 25px;
    background: #F7931E;
    margin: 4px 0;
    border-radius: 2px;
}

.footer-bar {
    height: auto;
    background-color: #1A1A1A;
    border-top: 1px solid #F9D53D;
}

.footer-container {
	margin-left:20vw;
	padding-top:1vh;
	padding-bottom:1vh;
}
.footer-link a {
    color: #F7931E; /* Set the desired color */
    text-decoration: none; /* Remove underline */
	font-size:75%;
    font-variation-settings: 'opsz' 9, 'soft' 0, 'wght' 600; /* Ensure the same font settings */
}

.footer_link a:hover {
	text-shadow: 0 0 3px #F7931E;
}
.landing {
	padding:10px 40vw 10px 20vw;
}

.h1 {
	color:#FFFFFF;
	font-size: 200%;
	font-variation-settings: 'opsz' 9, 'soft' 0, 'wght' 750;
	line-height: 100%;
	margin-top: 12px;
}

.h2 {
	color:#F9D53D;
	font-size: 150%;
	font-variation-settings: 'opsz' 9, 'soft' 0, 'wght' 600;
	line-height: 100%;
	margin-top: 12px;
}

.p {
	color:#FFFFFF;
	font-size: 100%;
	font-variation-settings: 'opsz' 9, 'soft' 0, 'wght' 300;
	margin-top: 12px;
}

.inline_link {
	color:#F7931E;
	font-variation-settings: 'opsz' 9, 'soft' 0, 'wght' 600;
	text-decoration: none;
}
.inline_link:hover {
	text-shadow: 0 0 3px #F7931E;
}

/* Story styles */
.story-wrapper {
    padding:10px 40vw 10px 20vw;
}
.story-wrapper:last-of-type {
    margin-bottom: 20px; /* Same spacing as between other stories */
}

.story-border {
    box-sizing: border-box; /* Ensure padding and border are included in the total width and height */
    width: 100%; /* Ensure it takes the full width of the parent */
}

.story {
}

.story-head {
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
}

.story-h1 {
	color:#FFFFFF;
	font-size: 200%;
	font-variation-settings: 'opsz' 9, 'soft' 0, 'wght' 750;
	line-height: 100%;
	margin-top: 12px;
	flex-grow: 1;
}

.story-date {
	color:#000000;
	font-size: 100%;
	margin-left: 20px;
	margin-top:12px;
	background-color:#f7931e;
	padding:5px;
}

.story-h2 {
	color:#F9D53D;
	font-size: 150%;
	font-variation-settings: 'opsz' 9, 'soft' 0, 'wght' 600;
	line-height: 100%;
	margin-top: 12px;
}

.story-p {
	color:#FFFFFF;
	font-size: 100%;
	font-variation-settings: 'opsz' 9, 'soft' 0, 'wght' 300;
	margin-top: 12px;
}

.story-spacer {
	display:block;
	margin-bottom:12px;
}

.story-phigh {
	font-variation-settings: 'opsz' 9, 'soft' 0, 'wght' 600;
}
.story-img {
	width:100%;
	display:block;
	margin-top: 12px
}

.story-img img {
	width:100%;
	display:block;
	border-top: 1px solid #F9D53D; /* Add a border around the events container */
	border-bottom: 1px solid #F9D53D; /* Add a border around the events container */
}

.story-img span {
	color:#F9D53D
}

.story-score-container {
    margin-top: 12px;
    flex-direction: column;
	border-top: 1px solid #F9D53D;
	width:50%;
}

.story-score-h1 {
	color:#F9D53D;
	font-size: 120%;
	font-variation-settings: 'opsz' 9, 'soft' 0, 'wght' 600;
	line-height: 100%;
	margin-top: 12px;
	margin-bottom: 8px;
}

.story-score-item {
    margin-bottom: 4px;
    font-size: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.story-score-item-deco {
    width: 100%;
    height: 3px;
    background-color: #FFFFFF;
    margin-bottom: 8px;
}

.story-score-rank {
    flex: 0 0 auto;
    font-variation-settings: 'opsz' 9, 'soft' 0, 'wght' 600;
    color: #F7931E;
	width: 25px;
}

.story-score-teamname {
    margin-left: 15px;
    flex: 1;
    text-align: left;
    font-variation-settings: 'opsz' 9, 'soft' 0, 'wght' 400;
    color: #ffffff;
}

.story-score-points {
    flex: 0 0 auto;
    font-variation-settings: 'opsz' 9, 'soft' 0, 'wght' 600;
    color: #F9D53D;
}

.story-score-stechen {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.2em; /* Make the circle smaller (about 50% height of 26) */
    height: 1.2em; /* Same height as width to make it a circle */
    font-size: 0.6em; /* Adjust the font size of "S" to fit inside */
    margin-right: 2px; /* Space between the circle and the number */
    line-height: 1; /* Ensure proper alignment of the "S" inside the circle */
}


/* Style for the horizontal line between stories */
.story-divider {
    width: calc(100% - 60vw); /* Matches the width of the story-wrapper */
    max-width: 100%; /* Prevent overflow */
    border: none;
    border-top: 1px solid #F9D53D; /* Divider color */
    margin: 20px 20vw; /* Adds left and right margins to center the divider relative to the story-wrapper */
    box-sizing: border-box; /* Include padding and border in element's total width */
}

	/* Event styles */
.events-border {
	margin-top: 15px;
	border-top: 1px solid #F9D53D; /* Add a border around the events container */
	border-bottom: 1px solid #F9D53D; /* Add a border around the events container */
    padding: 10px 0px; /* Add padding inside the border */
    box-sizing: border-box; /* Ensure padding and border are included in the total width and height */
    width: 100%; /* Ensure it takes the full width of the parent */
}
.event-wrapper {
    margin-bottom: 15px; /* Add margin between events */
    padding-bottom: 15px; /* Add padding at the bottom */
    border-bottom: 1px solid #F9D53D; /* Add a bottom border to create a horizontal line */
}

.event-wrapper:last-child {
    border-bottom: none; /* Remove the bottom border for the last event */
	margin-bottom: 5px; /* Add margin between events */
    padding-bottom: 0; /* Add padding at the bottom */
}
.event-h1 {
	color:#F9D53D;
	font-size: 150%;
	font-variation-settings: 'opsz' 9, 'soft' 0, 'wght' 600;
	line-height: 100%;
}
.eventreg-h1 {
	color:#F9D53D;
	font-size: 150%;
	font-variation-settings: 'opsz' 9, 'soft' 0, 'wght' 600;
	line-height: 100%;
	margin-bottom: 2%;
	margin-top: 1%;
}
/* Dot styles */
.dot {
    height: 15px;
    width: 15px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
	border: 1px solid white;
	flex-shrink: 0;
}

.dot-0 {
    background-color: #4F8F21;
}

.dot-1 {
    background-color: #A73610;
}

/* Slot container styles */
.slots {
    margin: 10px 0;
}

.slot {
    display: flex;
    align-items: center;
	color: white;
    border-bottom: 0.5px solid grey; /* Border below each slot */
    padding: 10px 0; /* Add padding for better spacing */
	flex-wrap: nowrap;
}
.slot:first-child {
    border-top: 0.5px solid grey; /* Apply top border only to the first slot */
}

.slot:last-child {
    border-bottom: 0.5px solid grey; /* Ensure the last slot has a bottom border */
}

/* Register button styles */
.register-btn-container {
	text-align: right;
}
.register-btn-container.breathe {
	margin-top: 20px;
}
	
.register-btn {
    background-color: #F7931E;
    color: #000000;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 100%;
    text-decoration: none;
    display: inline-block;
	font-family: 'Fraunces', sans-serif;
	font-variation-settings: 'opsz' 9, 'soft' 0, 'wght' 600;
	margin-top: 10px;
}

.register-btn:hover {
    background-color: #e6821a;
	text-shadow: 0 0 5px #F7931E;
}
/* END Event Styles */
	
.signup {
	padding:10px 40vw 10px 20vw;
}

/* Form Styles */
.form-group {
	margin-top: 7px;
}
.form-group:nth-of-type(1) {
    margin-top: 20px; /* Adjust this value as needed */
}
.form-group:last-of-type {
}

.form-group label {
    display: block;
    color: #FFFFFF;
    margin-bottom: 5px;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 8px;
    border: 1px solid #555555;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #1A1A1A; /* Dark background to match the theme */
    color: #fff; /* Light text color to contrast the dark background */
    margin-bottom: 10px; /* Add space between input fields */
	font-family: inherit;
	font-size: 80%;
}

.form-group textarea {
    height: 100px;
}

/* General placeholder styling */
::placeholder {
    color: #aaaaaa; /* Adjust the placeholder color to be less bright */
    opacity: 1; /* Override the default opacity in some browsers */
}

:-ms-input-placeholder {
    color: #aaaaaa; /* Adjust the placeholder color to be less bright for IE */
}

::-ms-input-placeholder {
    color: #aaaaaa; /* Adjust the placeholder color to be less bright for Edge */
}

/* Specific style for the teamgroesse select element */
#teamgroesse option[disabled] {
    color: #aaaaaa !important; /* Match the placeholder color and ensure it is applied */
}

.info-box {
    background-color: #1A1A1A; /* Match the dark background theme */
    color: #F9D53D; /* Use the yellow color for text */
    padding: 8px;
    margin: 10px 0;
    border: 1px solid #F9D53D; /* Add a border to match the theme */
    border-radius: 4px;
    font-size: 75%; /* Adjust font size if needed */
    font-family: 'Fraunces', sans-serif; /* Ensure the box uses the page-wide font */
}

.info-box.fad {
    background-color: #1A1A1A; /* Match the dark background theme */
    color: #FFFFFF; /* Use the yellow color for text */
    padding: 8px;
    margin: 10px 0;
    border: 1px solid #555555; /* Add a border to match the theme */
    border-radius: 4px;
    font-size: 75%; /* Adjust font size if needed */
    font-family: 'Fraunces', sans-serif; /* Ensure the box uses the page-wide font */
}
/* END form styles */

/* FAQ styles */
.faq-h1 {
	color:#FFFFFF;
	font-size: 200%;
	font-variation-settings: 'opsz' 9, 'soft' 0, 'wght' 750;
	line-height: 100%;
	margin-top: 12px;
	flex-grow: 1;
}

.faq-border {
    box-sizing: border-box; /* Ensure padding and border are included in the total width and height */
    width: 100%; /* Ensure it takes the full width of the parent */
}

.faq-wrapper {
    padding:10px 40vw 20px 20vw;
}

.faq-h2 {
	color:#F9D53D;
	font-size: 100%;
	font-variation-settings: 'opsz' 9, 'soft' 0, 'wght' 600;
	line-height: 100%;
	margin-top: 12px;
}

.faq-p {
	color:#FFFFFF;
	font-size: 100%;
	font-variation-settings: 'opsz' 9, 'soft' 0, 'wght' 300;
	margin-top: 3px;
}
.faq-phigh {
	font-variation-settings: 'opsz' 9, 'soft' 0, 'wght' 600;
}

.faq-pquote {
	font-variant: small-caps;
}

.registrieren-p {
	color:#FFFFFF;
	font-size: 100%;
	font-variation-settings: 'opsz' 9, 'soft' 0, 'wght' 300;
	margin-top: 3px;
}

.menu-items li {
    position: relative; /* Ensure the red circle is positioned relative to the list item */
    margin-left: 50px;
}

.alert-circle {
    display: none !important;
    background-color: #e61d07; /* Use your specific color */
    color: white;
    font-size: 10px; /* Smaller font size */
    width: 10px; /* Smaller size for better fit */
    height: 10px; /* Smaller size for better fit */
    border-radius: 50%;
    position: absolute;
    top: 3px; /* Move it slightly above */
    right: -5px; /* Align closer to the 'n' */
    transform: translate(50%, -50%); /* Diagonal adjustment */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.show-alert .alert-circle {
    display: flex;
}

.register-banner {
    display: block;
    background-color: #F7931E;
    color: #000000 !important; 
    font-family: 'Fraunces', sans-serif;
    font-size: 100%;
    font-variation-settings: 'opsz' 9, 'soft' 0, 'wght' 600;
    padding: 8px;
    margin: 0px 40vw 0px 20vw;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
	border-bottom: 1px solid #F9D53D;
}

.register-banner:link,
.register-banner:visited,
.register-banner:hover,
.register-banner:active {
    color: #000000 !important;
    text-decoration: none !important;
}

.register-banner:hover {
    text-shadow: 0 0 5px #F9D53D;
}

.register-banner-link {
    font-variation-settings: 'opsz' 9, 'soft' 0, 'wght' 900;
	white-space: nowrap;
}




@media (max-width: 768px) {
     .register-banner {
        margin: 0px 0 0px 0;
    }
	
    .header-bar {
        height: auto;
		justify-content: space-between;
        align-items: center;
		display:flex;
        padding: 0;
		position: relative;
		flex-wrap: wrap;
        transition: margin-bottom 0.3s ease-out; /* Transition for moving the main content */
    }

    .header-bar .logo {
        margin: 0;
        padding: 2.5vh 2.5vh;
        flex-grow: 1;
		box-sizing: border-box;
    }

    .header-bar .logo img {
        height: 10vh;
        max-height: 70px;
		margin:0;
    }

    .header-bar .hamburger {
        display: flex;
        flex-direction: column;
        cursor: pointer;
        padding: 0% 8% 0% 0%;
        z-index: 10;
		align-self: center;
		box-sizing: border-box;
    }

    .header-bar .hamburger span {
        height: 4px;
        width: 25px;
        background: #F7931E;
        margin: 3px 0;
        border-radius: 2px;
    }

    .header-bar nav {
        display: flex;
        flex-direction: column;
        width: 100%;
        background: #1A1A1A;
        position: relative;
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.3s ease-out;
        flex-grow: 0;
		order: 1;
		margin-left:0;
    }

    .header-bar nav.active {
		max-height: 500px;
		width: 100%;
        flex-grow: 1;
		display:block;
		order: 2;
    }

    .header-bar nav .menu-items {
        flex-direction: column;
		list-style: none;
        width: 100%;
        margin: 0;
        padding: 0;
		align-items: flex-start;
    }

    .header-bar nav .menu-items li {
        width: 100%;
        border-top: 1px solid #F9D53D;
		margin-left: 0;
        text-align: left;
		padding: 0;
    }

    .header-bar nav .menu-items li a {
        display: block;
        padding: 1.5vh 2.5vh;
        color: #F7931E;
        background: #1A1A1A;
        width: 100%;
		box-sizing: border-box;
		font-size: 2vh;
    }

    .header-bar nav .menu-items li a:hover {
        box-shadow: none;
    }
	
	.footer-bar {
        height: auto;
    }
	
	.footer-container {
	padding-left:2.5vh;
		display:flex;
		padding-top:1vh;
		padding-bottom:1vh;
		margin-left:0;
}

    main {
        transition: margin-top 0.3s ease-out; /* Add transition for main content */
    }

    .menu-open main {
        margin-top: 500px; /* Adjust margin-top to match the menu height */
    }

    .menu-open .header-bar {
        margin-bottom: 500px; /* Adjust margin-bottom to match the menu height */
    }
	
	.landing {
	padding:1.0vh 2.5vh;
}
	
	.signup {
	padding:1.0vh 2.5vh;
}

	.story-wrapper {
	padding:1.0vh 2.5vh;
}
	
	.story-wrapper:last-of-type {
    margin-bottom: 2.5vh; /* Same spacing as between other stories */
}
.story-head {
		flex-direction: column; /* Stack elements vertically */
		align-items: flex-start; /* Align items to the left */
	}
	
	.story-date {
		margin-left: 0; /* Remove left margin */
		margin-top: 10px; /* Add some top margin for spacing */
	}
	
	.story-score-container {
	width:100%;
}
	
	.story-divider {
    width: 100%;
	margin-left: 0;
		margin-right: 0;
	}
	
    .form-group input,
    .form-group textarea,
    .form-group select {
        font-size: 16px; /* Prevent zoom on input focus */
    }
	
	.form-group input,
.form-group select {
    height: 40px; /* Set a fixed height for uniformity */
    line-height: 1.2; /* Adjust line-height if needed */
    padding: 8px; /* Ensure padding does not exceed the height */
    font-size: 100%; /* Ensure text is not cut off */
}

.form-group textarea {
    height: 100px; /* Maintain a different height for the textarea */
}

	
	.faq-wrapper {
	padding:1.0vh 2.5vh;
}

	.show-alert-mobile {
    position: relative;
}

.show-alert-mobile::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    background-color: #e61d07;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

	/* Red circle for the hamburger (mobile menu) */
.hamburger.show-alert-mobile::before {
    content: '!';
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #e61d07; /* Your red color */
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e61d07;
    font-weight: bold;
    font-size: 10px;
}

/* Red circle with exclamation mark for mobile menu item */
nav.active .menu-items li.show-alert-mobile a::after {
    content: '!';
    position: absolute;
    top: 50%; /* Vertically center it */
    right: 10px; /* Adjust this to align next to the text */
    background-color: #e61d07; /* Your specific red color */
    width: 12px; /* Adjust the size */
    height: 12px; /* Adjust the size */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e61d07;
    font-weight: bold;
    font-size: 10px; /* Adjust font size */
    transform: translateY(-50%);
}

/* Make sure this is applied to the correct mobile state */
nav.active .menu-items li.show-alert-mobile {
    position: relative; /* Make sure the positioning is relative so the circle is placed correctly */
}



	
	}