@media (max-width: 768px) {
	
	
:root {
	--radius_box_vid: 6px;
	--radius_box_web: 6px;
	--radius_box_pics:0px;
	--radius_yt_box: 6px;
	--gap_lr: 1.5rem;
	--gap_txt: 0.3rem;
	--lh_cont: 1.5;
	--lh_list: 1.5;
}	


/*-------------------------------------------------------------
/ General Settings: -------------------------------------------
/------------------------------------------------------------*/
html, body {
    font-size: 1.0rem;
    line-height: var(--lh_cont);
}


h1 {
	font-size: 2.0rem;
	margin: 0.9rem 0;
	letter-spacing: 0.04em;
	color: var(--fc_txt_normal); 
}

h2 {
    font-size: 1.1rem;
    color: var(--fc_txt_normal); 
    margin: 0.9rem 0;
    letter-spacing: 0.025em;
}

h3 {
    font-size: 1.00rem;
    margin-bottom: 0.5rem;
    letter-spacing: 0.025em;
	color: var(--fc_txt_normal); 
}

h4 {
    font-size: 1.00rem;
    color: var(--fc_txt_normal);
    letter-spacing: 0.025em;
	margin-bottom: 0.5rem;
}

h5 {
    font-size: 0.975rem;
    color: var(--fc_txt_normal); 
	letter-spacing: 0.0rem;
	margin-bottom: 0.5rem;
}

p, ul, li, strong {
    font-size: 0.975rem;
    margin-bottom: 0.5rem;
}

a {
	font-size: 0.975rem;
	text-decoration: none;
	word-break: normal;
	overflow-wrap: anywhere;
}

strong {font-size: 0.975rem;}

.my_list {
	max-width: 100%;
	padding: 0.0rem 0.5rem 0.0rem 0.5rem;
}

.my_list li { 
	line-height: var(--lh_list);
}

a, button {
  -webkit-tap-highlight-color: transparent; 
  outline: none;
}


/*-------------------------------------------------------------
/ Main Container: ---------------------------------------------
/------------------------------------------------------------*/

.liner {height: 15px;}
.liner_welc {height: 10px;}
.liner_news {height: 0px;}


/*-------------------------------------------------------------
/ Logo and Navi: ----------------------------------------------
/------------------------------------------------------------*/

#box_navi {
    width: 95%;
    grid-template-columns: 1fr;
    justify-items: center;
	padding: 10px;
    gap: 5px;
}

#nav-toggle {
    display: block;
    grid-column: 1;
    justify-self: end;
	padding: 10px 10px 0px 10px;
}


#navi {
	display: flex;              
	flex-direction: column;
	align-items: center;
	gap: 5px;
	overflow: hidden;           
	max-height: 0;              
	opacity: 0; 
	transition:
    max-height 0.3s ease,
    opacity 0.3s ease,
    transform 0.3s ease;
}

#navi a.navi {
	display: block;        
	width: 100%;           
	text-align: center;   
	font-size: 0.975rem;
}

#navi.show {
	max-height: 600px;
	opacity: 1;
}


/*-------------------------------------------------------------
/ Welcome Box: ------------------------------------------------
/------------------------------------------------------------*/

#box_welc {
    padding: 0rem 2.5rem 0rem 2.5rem;
}

.bogen_l {
    height: 40px;
    border-radius: 0 3rem 0 0;
}

.bogen_r {
    height: 40px;
    border-radius: 3rem 0 0 0;
}


/*------------------------------------------------------------
/ Bilder -----------------------------------------------------
/------------------------------------------------------------*/
.resp_pic_mc {
    border-radius: var(--radius_box_web);
}


/*-------------------------------------------------------------
/ Video Box: --------------------------------------------------
/------------------------------------------------------------*/

.box_vid {
    width: 100%;
	padding: 0.5rem var(--gap_lr) 1.5rem var(--gap_lr);
    background-color: var(--bgc_content2);
	border-radius: var(--radius_box_vid);
}


/*-------------------------------------------------------------
/ Intro Box: --------------------------------------------------
/------------------------------------------------------------*/

.box_intro_main {
	display: grid;
    width: 100%;
    gap: 0;
    border: 0px solid;
	background: white;
	padding: 0.0rem 0rem 0.0rem 0rem;
}

.box_intro_cols {
    width: 100%;
    border: 0px solid;
	padding: 0;
	background: none;
    box-sizing: border-box;	
	border-radius: 0;	
}

.box_intro_cols_adj {
	padding: 0.0rem calc(var(--gap_lr) + var(--gap_txt)) 1.0rem calc(var(--gap_lr) + var(--gap_txt));
	box-sizing: border-box;
}

.box_intro_cols_adj h3 {text-align: center;  font-size: 1.15rem; max-width: 95%; margin:0 auto 0.5rem auto;}

.resp_pic_intro {
    border-radius: 0px;
	padding: 2.0rem var(--gap_lr) 0.0rem var(--gap_lr);
    margin: 0 0 1.0rem 0;
	overflow: hidden;
}

.resp_pic_intro img{
	border-radius: var(--radius_box_web);
}

/* Elements: */
.box_intro_cols:nth-child(1) .resp_pic_intro {
	padding: 2.0rem var(--gap_lr) 0.0rem var(--gap_lr);
}

.box_intro_cols:nth-child(1),
.box_intro_cols:nth-child(1) .box_intro_cols_adj {
	background: var(--bgc_content1); 
}

.box_intro_cols:nth-child(2),
.box_intro_cols:nth-child(2) .box_intro_cols_adj {
	background: var(--bgc_content2); 
}

.box_intro_cols:nth-child(3),

.box_intro_cols:nth-child(3),
.box_intro_cols:nth-child(3) .box_intro_cols_adj {
	background: var(--bgc_content1); 
}

.box_intro_cols:nth-child(3) .resp_pic_intro {
	padding:  2.0rem var(--gap_lr) 0.0rem var(--gap_lr);
}


/*-------------------------------------------------------------
/ News: -------------------------------------------------------
/------------------------------------------------------------*/

.news {
	width: 100%;
	padding: 0.0rem 0rem 0.0rem 0rem;
}

.news_media {padding: 2.0rem var(--gap_lr) 0.0rem var(--gap_lr); border-radius:var(--radius_box_web);}
.news_body {padding: 1.0rem calc(var(--gap_lr) + var(--gap_txt)) 0.0rem calc(var(--gap_lr) + var(--gap_txt));}

.news_med1 ,
.news_med2 {
	border-radius: var(--radius_box_web);
	margin-bottom: 0px;}
	
.news_body h3{text-align: center;  font-size: 1.15rem; max-width: 90%; margin: 0 auto 0.5rem auto;}
.content_ref {width: 84%;}
.ani_imp {width: 260px;}

p.news_info{
	max-width: 90%;
	padding-left: 1.5rem;
	padding-right:0;
} 

p.news_info {font-size: 0.925rem;}

/*------------------------------------------------------------
/ Main Content Inhalte für Rollenspiel, Freizeitveranstaltung,
Kompetenztraining, Datenschutz, Impressum: 
/------------------------------------------------------------*/

.box_pic_mc {
    width: 100%;
	padding: 1.0rem var(--gap_lr) 0.0rem var(--gap_lr);
    background: white;
}

.box_mc {
    width: 100%;
    background: white;
	padding: 1.0rem calc(var(--gap_lr) + var(--gap_txt)) 0.0rem calc(var(--gap_lr) + var(--gap_txt));
}

.box_mc h3 {text-align: center;}


/*-------------------------------------------------------------
/ Impressum: --------------------------------------------------
/------------------------------------------------------------*/

.content_mc h3 {text-align: left;}
.content_imp {font-size: 0.9rem;}
.content_imp a {font-size: 0.9rem;}


/*-------------------------------------------------------------
/ Kontakt: ----------------------------------------------------
/------------------------------------------------------------*/

.box_kontakt_head {
    width: 100%;
    padding: 1.0rem calc(var(--gap_lr) + var(--gap_txt)) 1.0rem calc(var(--gap_lr) + var(--gap_txt));
}

.box_kontakt {
    width: 100%;
    background: white;
	padding: 0.5rem var(--gap_lr) 0.0rem var(--gap_lr);
}

.box_kontakt_step {
    text-align: center;
    padding: 0.5rem 0.75rem 0.5rem 0.75rem;
	border-radius: var(--radius_box_web);
}

.box_kontakt_cont {
    width: 100%;
    background-color: var(--bgc_content2);
    padding: 1rem 0.75rem 1.0rem 0.75rem;
}

.content_kontakt {
    text-align: center;
    padding: 0rem 0.75rem 0.5rem 0.75rem;
    align-items: center;
}


/*-------------------------------------------------------------
/ Über Uns: ---------------------------------------------------
/------------------------------------------------------------*/

.box_pic_ueber_uns_all {
    width: 100%;
    max-width: none;
	padding: 1.0rem var(--gap_lr) 0.5rem var(--gap_lr);
    background-color: var(--bgc_content2);
}

.box_ueber_uns_all {
    width: 100%;
    max-width: none;
    text-align: left;
    padding: 0.5rem 2.25rem 0 2.25rem;
	padding: 0.5rem calc(var(--gap_lr) + var(--gap_txt)) 0.0rem calc(var(--gap_lr) + var(--gap_txt));
}

.box_pic_ueber_uns_per {
    width: 90%;
    max-width: none;
    padding: 1.0rem 3.0rem 0.5rem 2.0rem;
	padding: 1.0rem calc(var(--gap_lr) + 1.0rem) 0.5rem var(--gap_lr);
    background-color: var(--bgc_content2);
}

.box_ueber_uns_per {
    width: 90%;
    max-width: none;
	padding: 0.5rem calc(var(--gap_lr) + var(--gap_txt)) 0.0rem calc(var(--gap_lr) + var(--gap_txt));
}