/*
Theme Name: strk26
Description: starkregenkonzept.de
Version: 1.0
Author: JOHDA Webdesign
*/

/* Variablen */

:root
{
    --dark: #006EB7;
	--very_dark: #00426E;
    --light: #E2EEF6;
    --accent: #20D677;
    --white: #FFF;
}


/* Basiseinstellungen */

*
{
    margin: 0;
    padding: 0;
    position: relative;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}


html
{
    width: 100%;
    height: 100%;
    font-size: 1.5rem;
}

body
{
    line-height: 1.5rem;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
	letter-spacing: -0.025em;
    color: var(--very_dark);
    overflow-x: hidden;
	background: var(--white);
}



/* Globale Eigenschaften */

.screen_width
{
    width: 100%;
    position: relative;
}

.content_width
{
    width: min(90%,1440px);
    margin: 0 auto;
    position: relative;
}

.minor_width
{
    width: min(1200px, 90%);
    margin: 0 auto;
}

.center_position
{
    margin: 0 auto;
}

.top_padding
{
    padding-top: 4rem;
}

.more_top_padding
{
    padding-top: 6rem;
}

.bottom_padding
{
    padding-bottom: 4rem;
}

.small_bottom_padding
{
	margin-bottom: 1rem;	
}

.more_bottom_padding
{
    padding-bottom: 6rem;
}

.bottom_margin
{
	margin: 0 0.5rem 1rem 0.5rem;
}

.padding3
{
	padding: 3rem;
}

.padding4
{
	padding: 4rem;
}

.top_margin
{
	margin-top: 3rem;
}

.align-right
{
	text-align: right;
}

.align-center
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.content_grid
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.bg_white
{
    background: var(--white);
}

.bg_light
{
    background: var(--light);
}

.bg_dark
{
	background: var(--dark);
	color: var(--white) !important;
}

.box_shadow
{
	box-shadow: 0.15rem 0.15rem 0.25rem rgba(31,83,109,0.25);
}

.bottom_border
{
	border-bottom: 1px solid var(--light);
}

.hidden
{
    overflow: hidden !important;
}

.more-link,
.more-link-negative
{
	display: inline-block;
	padding: 0.1rem .75rem;
	background: var(--dark);
	color: var(--white);
	border-radius: 1rem;
	text-decoration: none;
}

.more-link:hover
{
	background: var(--light);
	color: var(--very_dark);
}

.more-link-negative
{
	background: var(--white);
	color: var(--very_dark);	
}

.more-link-negative:hover
{
	background: var(--very_dark);
	color: var(--white);	
}


.category-link
{
	display: inline-block;
	padding: 0.1rem .75rem;
	background: var(--very_dark);
	color: var(--white);
	border-radius: 1rem;
	text-decoration: none;
	border: 2px solid var(--very_dark);
}

.category-link:hover
{
	background: var(--white);
	color: var(--very_dark);
	border: 2px solid var(--light);
}

p img,
div img
{
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

/* Scroll to Top */

#scroll_to_top
{
    display: flex;
    width: 2rem;
    height: 2rem;
    border-radius: 1rem;
    background: var(--white);
    z-index: 10000;
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    justify-content: center;
    align-items: center;
	border: 1px solid var(--light);
}

#scroll_to_top a
{
    font-family: 'Icofont';
    text-align: center;
    text-decoration: none;
    font-size: 1.5rem;
    color: var(--dark);
	transition: color 0.3s ease-in-out;
}

#scroll_to_top a:hover
{
	color: var(--very_dark);
}


/* Header */

#skiplink
{
    width: 100%;
    padding: 2rem 0;
    text-align: center;
    background: #FFF;
    margin: 0;
    display: block;
    margin-top:-5.5rem;
}

#skiplink:focus
{
    display: block;
    margin-top: 0;
}

#home
{
	display: block;
	font-size: 1.5rem;
	color: var(--light);
	transition: color 0.1s ease-in-out;
	padding-top: 0.25rem;
	font-family: 'icofont';
	text-decoration: none;
}

#home:hover
{
	color: var(--very_dark);
	text-decoration: none;
}

#main_nav
{
	display: flex;
	justify-content: space-between;
}

#main_nav ul
{
	display: flex;
	list-style-type: none;
}

#main_nav ul li
{
	border-left: 1px solid var(--light);
}

#main_nav ul li:hover
{
	background: var(--very_dark);
}

#main_nav ul li a
{
	display: block;
	padding: 0.25rem 1rem;
	color: var(--light);
	text-decoration: none;
	text-transform: uppercase;
}

.event_button
{
	padding: 0.1rem 0.5rem;
	text-transform: none;
	background: var(--very_dark);
}

.event_button:hover
{
	background: var(--light);
	color: var(--very_dark) !important;
}

#mobile_menu
{
	display: none;
}

/* Abschnitte */

/* Hero Section */

#project_map_stage
{
	border: 1px solid var(--light);
}

#hero article:nth-of-type(2)
{
	display: flex;
	justify-content: center;
	flex-direction: column;
}

h1
{
	font-size: 2rem;
	line-height: 2.5rem;
}

h1 + p
{
	margin-top: 2rem;
}

/* Beitrags-Inhalte */

#single_hero img
{
	width: 100%;
	height: auto;
	object-fit: contain;
}


#content ul li
{
	margin-left: 1rem;
	padding-left: 0.25rem;
}


#content ul li ul li
{
	margin-left: 1rem;
	padding-left: 0.25rem;
}

#content ul + p,
#content p + ul,
#content h3 + ul,
#content ul + h3
{
	margin-top: 2rem;
}



/* Ereignis melden */

h4
{
	font-size: 1.8rem;
	line-height: 2rem;
	margin: 0;
}

h4 + p
{
	margin-top: 1rem;
}


/* Projekt-Slider */

#project_slider_stage article
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

h2
{
	margin-bottom: 2rem;
	width: 100%;
}

h2 a
{
	color: var(--very_dark);
	text-decoration: none;
}

#project_slider_stage img
{
	width: 25%;
	height: auto;
	object-fit: contain;
}

#project_slider_stage p
{
	width: calc(75% - 4rem);
}

/* Cards */

h6
{
	font-weight: 300;
	font-size: 1.5rem;
	color: var(--dark);
	letter-spacing: 0;
}


strong
{
	font-weight: 700;
}

/* Page und Single */



p + p,
ul + p,
p + ul,
p + h2,
h3 + p,
p + h3
{
	margin-top: 2rem;
}

a
{
	color: var(--dark);
}

a:hover
{
	text-decoration: none;
}

#hero ul li
{

	margin-left: 1em;
}

/* Footer */


footer ul
{
    list-style-type: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

#logo
{
	height: 7rem;
	width: auto;
	object-fit: contain;
}


footer a
{
	color: var(--white);
}

/* Slider allgemeine Einstellungen */


.slick-slider
{
    margin-bottom: 0 !important;
}

.slick-prev:before {
    content: '\27F5' !important;
    position: absolute;
    top: 0;
    left: -3rem;
}

.slick-next:before {
    content: '\27F6' !important;
    position: absolute;
    top: 0;
    right: -3rem;
}

.slick-prev:before, .slick-next:before {
    font-family: 'Icofont' !important;
    font-size: 2rem !important;
    line-height: 1;
    opacity: 1 !important;
    color: var(--dark) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev:before:hover, .slick-next:before:hover {
    color: var(--very_dark) !important;
}

.slick-dots
{
    position: relative !important;
    bottom: 0 !important;
    left: 0 !important;
    display: flex;
    justify-content: center;
    padding: 2rem 0 0 0 !important;
    height: 0.75rem;
}

.slick-dots > li
{
    position: relative !important;
    display: block !important;
    width: 0.75rem !important;
    height: 0.75rem !important;
    margin: 0 !important;
    margin: 0 0.25rem 0.5rem 0.25rem !important;
    padding: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slick-dots > li > button
{
    display: block;
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    padding: 0 !important;
    background: var(--white);
    border: 0.1rem solid var(--dark);
    border-radius: 0.5rem;
    color: var(--dark);
}

.slick-dots > li > button:hover
{
    background: var(--dark);
    cursor: pointer;
}

.slick-dots > li.slick-active > button
{
    background: var(--dark);
}

.slick-dots > li > button::before
{
    content: "" !important;
}


/* Responsive */


@media only screen and (max-width: 1500px)
{
	.slick-prev::before,
	.slick-next::before
	{
		display: none;
	}
}

@media only screen and (max-width: 1350px)
{
	
	#mobile_menu {
       width: 2rem;
       height: 2rem;
	   padding: 0.5rem 0;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       order: 2;
       cursor: pointer;
   }
   
    .navbar_toggle .bar {
        width: 2rem;
        height: 0.2rem;
        transition: all 0.15s ease-in-out;
        background: var(--white);
    }
   
    .navbar_item {
        width: 100%;
        padding: 2.5rem;
        text-align: center;
        margin: 0;
    }
   
    .navbar_links {
        font-size: 3.5rem;
    }
   
   
    #mobile_menu.is-active .bar:nth-child(1) {
        transform: translateY(.4rem) rotate(45deg);
     }
   
    #mobile_menu.is-active .bar:nth-child(2) {
        opacity: 0;
    }
   
     #mobile_menu.is-active .bar:nth-child(3) {
        transform: translateY(-.4rem) rotate(-45deg);
     }
	
	 #flyout {
        background: #fff;
        flex-direction: column;
        margin: 0;
        width: min(20rem, 90%);
        position: absolute;
        left: 50%;
        top: -700px;
        transform: translate(-50%,0);
        transition: all 0.15s ease-in-out;
        z-index: 2000;
        padding: 3rem;
	   	height: initial;
	   	opacity: 0;
    }

   
    #flyout.active {
        top: 0rem;
        transition: all 0.15s ease-in-out;
		opacity: 1;
		z-index: 2000;
    }
	
	#flyout.active li {
		border: none;
    }
	
	#flyout.active li a {
        color: var(--dark);
		padding: 0.5rem 1rem;
		text-align: center;
    }
	
	.event_button
	{
		border-radius: 2rem;
		color: var(--white) !important;
	}
}

@media only screen and (max-width: 1150px)
{
	.content_grid
	{
		   grid-template-columns: 1fr;
	}
	

	
	#project_slider_stage article
	{
		flex-direction: column;
	}
	
	#project_slider_stage img
	{
		width: 100%;
		height: auto;
		object-fit: contain;
		margin-bottom: 2rem;
	}
	
	footer ul
	{
		grid-template-columns: 1fr;
	}
	
	.no_mobile
	{
		display: none;
	}
	
	h2 a
	{
		hyphens: auto;
	}
}

@media only screen and (max-width: 600px)
{
	h1,
	#news article p,
	#termine article p
	{
		hyphens: auto;
	}
	
	.padding3,
	.padding4
	{
		padding: 1.5rem;
	}
	
	.slick-dots
	{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		padding: 0;
		height: initial;
	}
	
	
	#scroll_to_top
	{
		position: fixed;
		bottom: 1rem;
		right: 1rem;
	}
}


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

	.slick-dots
	{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		padding: 0;
		height: initial;
	}
	
}