/*  Stylesheet für ioviso Webseiten  */

/*  Schriftarten  */

/* open-sans -200 */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'open-sans';
  font-style: normal;
  font-weight: 200;
  src: url('../font/OpenSans-Light.ttf') format('truetype'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans -200italic */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'open-sans';
  font-style: italic;
  font-weight: 200;
  src: url('../font/OpenSans-LightItalic.ttf') format('truetype'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans -regular */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'open-sans';
  font-style: normal;
  font-weight: 400;
  src: url('../font/OpenSans-Medium.ttf') format('truetype'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans -italic */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'open-sans';
  font-style: italic;
  font-weight: 400;
  src: url('../font/OpenSans-MediumItalic.ttf') format('truetype'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans -600 */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'open-sans';
  font-style: normal;
  font-weight: 600;
  src: url('../font/OpenSans-Bold.ttf') format('truetype'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans -600italic */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'open-sans';
  font-style: italic;
  font-weight: 600;
  src: url('../font/OpenSans-BoldItalic.ttf') format('truetype'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans -800 */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'open-sans';
  font-style: normal;
  font-weight: 800;
  src: url('../font/OpenSans-ExtraBold.ttf') format('truetype'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans -800italic */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'open-sans';
  font-style: italic;
  font-weight: 800;
  src: url('../font/OpenSans-ExtraBoldItalic.ttf') format('truetype'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-semicondensed -200 */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'open-sans-semicondensed';
  font-style: normal;
  font-weight: 200;
  src: url('../font/OpenSans_SemiCondensed-Light.ttf') format('truetype'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-semicondensed -200italic */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'open-sans-semicondensed';
  font-style: italic;
  font-weight: 200;
  src: url('../font/OpenSans_SemiCondensed-LightItalic.ttf') format('truetype'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-semicondensed -regular */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'open-sans-semicondensed';
  font-style: normal;
  font-weight: 400;
  src: url('../font/OpenSans_SemiCondensed-Medium.ttf') format('truetype'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-semicondensed -italic */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'open-sans-semicondensed';
  font-style: italic;
  font-weight: 400;
  src: url('../font/OpenSans_SemiCondensed-MediumItalic.ttf') format('truetype'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-semicondensed -600 */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'open-sans-semicondensed';
  font-style: normal;
  font-weight: 600;
  src: url('../font/OpenSans_SemiCondensed-Bold.ttf') format('truetype'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-semicondensed -600italic */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'open-sans-semicondensed';
  font-style: italic;
  font-weight: 600;
  src: url('../font/OpenSans_SemiCondensed-BoldItalic.ttf') format('truetype'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-semicondensed -800 */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'open-sans-semicondensed';
  font-style: normal;
  font-weight: 800;
  src: url('../font/OpenSans_SemiCondensed-ExtraBold.ttf') format('truetype'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-semicondensed -800italic */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'open-sans-semicondensed';
  font-style: italic;
  font-weight: 800;
  src: url('../font/OpenSans_SemiCondensed-ExtraBoldItalic.ttf') format('truetype'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* osi-madre */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'osi-madre';
  font-style: normal;
  font-weight: 400;
  src: url('../font/osi-madre.ttf') format('truetype'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* osi-sys */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'osi-sys';
  font-style: normal;
  font-weight: normal;
  src: url('../font/osi-sys.ttf') format('truetype'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/*  Angaben bzw Transitions für animierte Elemente  */

@keyframes menuAnim {
  0% {
    height: 0;
  }
  100% {
    height: auto;
  }
}

/*   Farben,  Abstände  und  Größenangaben:    var(--name, fallback-value);  */

:root {
--main_color: #02678C;    /*  petrol - var(--main_color, #003862);  */
--main_color_dark: #003953;   /*  darkpetrol - var(--main_color_dark, #001D37);  */
--main_color_light: #5FADC9;  /*  highpetrol - var(--main_color_light, #4F90C9);  */
--side_color: #727574;     /*  green - var(--side_color, #1F72AD);  */
--side_color_dark: #3A4541;     /*  green - var(--side_color_dark, #004D83);  */
--side_color_light: #7C8783;  /*  highgreen - var(--side_color_light, #8EB8E1);  */
--bright_color: #E9E6E5; /*  hellbeige - var(--bright_color, #E1ECF9);  --bright_color: #EFEDEB;  var(--bright_color, #EFEDEB);  */
--verybright_color: #FEFEFE;  /*  sehrhell - var(--verybright_color, #FAFBFE);   --verybright_color: #FFFEFC;   var(--verybright_color, #FFFEFC);  */
--scripture_color: #141414;  /*  pSchrift - var(--scripture_color, #141414);  */
--mark_color: #E35F0D;  /* orange - var(--mark_color, #E35F0D);  */

--gap_A: 11%;  /*  var(--gap_A, 1rem);  Außenrand  */
--gap_h: 4rem;  /*  var(--gap_h, 2rem);  horizontaler Abstand  */
--gap_v: 1.6rem;  /*  var(--gap_v, 1rem);  (halber) vertikaler Abstand  */
--gap_t: 2.5rem;  /*  var(--gap_t, 1rem);  Top-gap vor erstem Eintrag  */
--flex_gap: calc(var(--gap_h) / 2);   /*  var(--flex_gap, 2rem);  Abstand der Elemente innerhalb von flex-boxen  */
--rand: 1rem;     /*  var(--rand, 0.5rem);  Rand / padding für Textboxen etc.  */
--logo_height: 3rem;     /*  var(--logo_height, 3rem);  */
--cornerRad: 0px;   /*  var(--cornerRad, 5px);  optionale Ecken-Rundung von Elementen  */
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box; 
}
html {
	font-size: 100%;
}  
body {
	width: 100%;
	min-height: 100vh;
	font-size: 100%;
}
#Alles {
	width: 100%;
	min-height: 100vh;
	display: grid;
	grid-template-columns: [links] var(--gap_A, 1rem) [ve1] 1fr [ve2] 1fr [ve3] 1fr [ve4] 1fr [ve5] 1fr [ve6] 1fr [ve7] var(--gap_A, 1rem) [rechts];
	grid-template-rows: [oben] max-content [ho1] auto [ho2] auto [ho3] auto [ho4] auto [ho5] auto [ho6] auto [ho7] auto [ho8] auto [ho9] max-content [unten];
	column-gap: var(--gap_h, 2rem);
	row-gap: 0;

	background-color: var(--verybright_color, #FAFBFE);
	font-family: 'open-sans', Helvetica, Arial, sans-serif;
	font-size: 100%;
}

/*  (Über-) Schriften - Fonts  */
	
h1 {
	font-family: 'open-sans-semicondensed', 'open-sans', Helvetica, Arial, sans-serif; 
   font-weight: 600;
	font-size: 1.6em;
	color: var(--main_color_dark, #001D37);
	margin-bottom: 1.2em;
}
h2 {
	font-family: 'open-sans-semicondensed', 'open-sans', Helvetica, Arial, sans-serif; 
   font-weight: 600;
	font-size: 1.35em;
	color: var(--main_color_dark, #001D37);
	margin-bottom: 0.8em;
}
h2 span {
	font-size: 75%; 
	color: var(--mark_color, #E35F0D);
	text-transform: none;
}
h3	{
	font-family: 'open-sans-semicondensed', 'open-sans', Helvetica, Arial, sans-serif; 
   font-weight: 600;
	font-size: 1.2em; 
	color: var(--main_color_dark, #001D37);
	margin-bottom: 0.8em;
}
h4 {
	font-family: 'open-sans-semicondensed', 'open-sans', Helvetica, Arial, sans-serif; 
   font-weight: 400;
	font-size: 1.4em;
	color: var(--main_color, #003862);
	padding-left: 0.8em; 
	border-left:5px solid var(--side_color_light, #8EB8E1);  
	margin-bottom: 0.8em;
}
h5 {
	font-family: 'open-sans-semicondensed', 'open-sans', Helvetica, Arial, sans-serif; 
   font-weight: 600;
	font-size: 1.2em; 
	color: var(--mark_color, #E35F0D); 
	margin-bottom: 0.8em;
}
h6	{
	font-family: 'open-sans-semicondensed', 'open-sans', Helvetica, Arial, sans-serif; 
   font-weight: 400;
	font-size: 1.0em; 
	color: var(--mark_color, #E35F0D); 
	margin-bottom: 0.8em;
}
p {
	font-family: 'open-sans', Helvetica, Arial, sans-serif; 
   font-weight: 400;
	font-size: 1em; 
	color: var(--scripture_color, #141414); 
	text-align: left; 
	line-height: 1.25em; 
	margin-bottom: 1em;
}
a 	{ 
	color: var(--main_color_dark, #001D37);  
	background-color: transparent;	
	outline: none; 
	font-weight: 600;
	text-decoration: underline;
	border-radius: 0.18em;
	}
a:hover { 
	color: var(--verybright_color, #FAFBFE);  
	text-decoration: none; 
	background-color: var(--side_color, #1F72AD);
}
a.ah_heller:hover {
	background-color: var(--side_color_light, #8EB8E1); 	
}
ul {
	font-family: inherit; 
   font-weight: 400;
	font-size: 1em; 
	color: var(--scripture_color, #141414); 
	text-align: left; 
	line-height: 1.25em; 
	margin-left: 1em;
}
ul li {
	margin-bottom: 0.5em;
}
.madre {
	font-family: 'osi-madre';
	font-weight: 400;
}
.m_o_x {  /*  margin top/oben eliminieren!  */
	margin-top: 0;
}
img {
	border: 0;
}

/*  (Nicht-) Sichtbarkeit bestimmter Elemente in Abhängigkeit vom Display bzw. Fensterbreite  */

.d_none {
	display: none;
}
.X001i, .X001b, .X001ib, .X001f, .X001g {
    display: none;
}
.X011i, .X011b, .X011ib, .X011f, .X011g, .X011li {
    display: none;
}
.X100i {
    display: inline;
}
.X100b {
    display: block;
}
.X100ib {
    display: inline-block;
}
.X100f {
    display: flex;
}
.X100g {
    display: grid;
}
.X110i {
    display: inline;
}
.X110b {
    display: block;
}
.X110ib {
    display: inline-block;
}
.X110f {
    display: flex;
}
.X110g {
    display: grid;
}

/*  HEADER, Logo und Navigation  */

#head_bar {
	display: grid;
	grid-area: oben / links / ho1 / rechts;
	background-color: var(--main_color, #003862);
	position: sticky;
	top: 0;
	z-index: 11;
}
header {
	display: grid;
	grid-area: oben / ve1 / ho1 / ve7;
	position: sticky;
	top: 0;
	z-index: 12;
	font-family: 'open-sans-semicondensed', 'open-sans', Helvetica, sans-serif;
	color: var(--verybright_color, #FAFBFE);
	width: 100%;
}
header ul  {
  margin-left: 0;  
}
#head_full_c {
	display: flex; 
	align-items: center;
	justify-content: space-between;
}
.head_logo {
	margin: 0.5rem 0;
	height: auto;
}
.head_a:hover {   /*  Logo ...  */
   background: transparent; 
}
.head_img {
	display: inline;
	margin-top: 0.25rem;
	height: var(--logo_height, 3rem);
	width: auto;
}
.text_logo {
	font-size: 2em;
	font-weight: 400;
	margin-right: 0;
	margin-left: 1.2em;
	background: transparent;
}

details.navi_d {   /*  das Hamburger-Navi (navi_d) wird auf breiten Bildschirmen ausgeblendet!  */
	display: none;
}

/*  nav = offene Navi-Buttons für breitere Bildschirme bzw. Fenster  */

nav {
	float: right;
}
.navi-right {
	text-align: right;
/*	padding-right: 0.2em;
	border-right: 6px solid var(--main_color_light, #4F90C9);  */
/*  	padding-left: 0.4em;
	border-left: 6px solid var(--main_color_light, #4F90C9);  */
}
.navi-right a {
	display: inline-block;
	width: 5.0em;
	text-align: center;
	background-color: transparent;
	color: var(--verybright_color, #FAFBFE); 
	text-decoration: none;
	border-radius: var(--cornerRad, 0);
	font-size: 1.2em;
	font-weight: 400;
	line-height: 1.5em;
	padding: 0.4em 0;
	margin-left: 0.2em;
}
.navi-right a:hover {
	background-color: var(--bright_color, #E1ECF9);  
	color: var(--main_color_dark, #001D37);
}
.navi-right a.active {
	background-color: var(--main_color_light, #4F90C9); 
	color: var(--verybright_color, #FAFBFE); 
}
.navi-right a.active:hover {
	background-color: var(--main_color_light, #4F90C9); 
}

/*  INHALT - Styles und Formatierung für den Inhaltsbereich (= alles zwischen header und footer)  */

#inhalt_full {
	display: grid;
	grid-area: ho1 / links / ho9 / rechts;
	background-color: var(--verybright_color, #FAFBFE);
}		
#inhalt {
	display: grid;
	grid-area: ho1 / ve1 / ho9 / ve7;
	justify-self: stretch;
	width: auto;
/*  	min-height: calc(100vh - var(--logo_height, 3rem) - 6.1rem);  nur grob abgegrenzt -> damit footer nicht nach oben rutscht bei wenig Inhalt, kann aber eigentlich inzwischen weg.  */
	background-color: var(--verybright_color, #FAFBFE);
}
#elm_first {
	display: grid;
	grid-area: ho1 / ve1 / ho2 / ve7;
	margin-top: var(--gap_t, 1rem);
	margin-bottom: calc(var(--gap_v, 1rem) / 4);
}
#elm_02 {
	display: grid;
	grid-area: ho2 / ve1 / ho3 / ve7;
	margin-top: calc(var(--gap_v, 1rem) / 4);
	margin-bottom: calc(var(--gap_v, 1rem) / 4);
}
#elm_03 {
	display: grid;
	grid-area: ho3 / ve1 / ho4 / ve7;
	margin-top: calc(var(--gap_v, 1rem) / 4);
	margin-bottom: calc(var(--gap_v, 1rem) / 4);
}
#elm_04 {
	display: grid;
	grid-area: ho4 / ve1 / ho5 / ve7;
	margin-top: calc(var(--gap_v, 1rem) / 4);
	margin-bottom: calc(var(--gap_v, 1rem) / 4);
}
#elm_05 {
	display: grid;
	grid-area: ho5 / ve1 / ho6 / ve7;
	margin-top: calc(var(--gap_v, 1rem) / 4);
	margin-bottom: calc(var(--gap_v, 1rem) / 4);
}
#elm_06 {
	display: grid;
	grid-area: ho6 / ve1 / ho7 / ve7;
	margin-top: calc(var(--gap_v, 1rem) / 4);
	margin-bottom: calc(var(--gap_v, 1rem) / 4);
}
#elm_07 {
	display: grid;
	grid-area: ho7 / ve1 / ho8 / ve7;
	margin-top: calc(var(--gap_v, 1rem) / 4);
	margin-bottom: calc(var(--gap_v, 1rem) / 4);
}
#elm_last {
	display: grid;
	grid-area: ho8 / ve1 / ho9 / ve7;
	margin-top: calc(var(--gap_v, 1rem) * 2);
	margin-bottom: var(--gap_v, 1rem);
}
#elm_last .fc_tri section {
	align-items: center;
	align-content: center;
}
#last_row {
	display: grid;
	grid-area: ho8 / links / ho9 / rechts;
	margin-top: var(--gap_v, 1rem);
}
.dark_row {
	background-color: var(--bright_color, #E1ECF9);
}

article {
	margin: var(--gap_v, 1rem) 0;
}
section {
	margin: var(--gap_v, 1rem) 0;
}
div {
	height: auto;
}

/*  flexible Bereiche bzw. Boxen, die in Abhängigkeit von der Fensterbreite mal neben und mal untereinander angeordnet werden  */

.flex_cont {
	 display: flex;
    flex-flow: row wrap;		
	 margin: 0 calc(0em - var(--flex_gap, 2rem));
}
.flex_cont article, .flex_cont section {
	margin-left: var(--flex_gap, 2rem);
	margin-right: var(--flex_gap, 2rem);
}
.flex_cont > * {
    flex: 1 100%;  /* Alle Kindelemente werden über die volle Breite dargestellt */
}
.flex_cont section {
    flex: 1 40%;  /* Diese Elemente erhalten eine halbe Breite */
}
.fc_tri section {
    flex: 1 20%;
}
section.fcs_more {
    flex: 1 45%;
}
section.fcs_less {
    flex: 1 35%;
}


/*  spezielle Formatierungen für einzelne Elemente  */

.reduce {
	width: 100%;
}
.blowup {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}
.news {
	background-color: var(--bright_color, #E1ECF9); 
	border: none;
	padding: var(--rand, 0.5rem);
	border-radius: var(--cornerRad, 5px);
}
.fbx {
   background-color: var(--main_color_light);
   border: none;
	padding: var(--rand, 0.5rem);
	border-radius: var(--cornerRad, 5px);
}
.dute {
   background: transparent; 
   border: none;
	padding: 0;
	border-radius: var(--cornerRad, 5px);
}
.full_img {	
   width: 100%;
   height: auto;
   justify-self: center;
	align-self: center;
}
section:has(.full_img) {
	display: flex;
}
.img_part {
   max-height: 80vH;
   max-width: 100%;
   width: auto;
   height: auto;
}
.sectpic {
	background-image: url("../img/content/Bild_D.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	height: auto;
	align-self: stretch;
}

hr {
	border: 0;
   border-top: 3px dotted var(--side_color, #004D83);
	margin: var(--gap_v, 1rem) 0;
}
.hr_m {
	margin: calc(var(--gap_v, 1rem) * 2) 0;
}
.hr_straight {
   border-top: 3px solid var(--side_color, #004D83);
   margin-top: calc(var(--gap_v, 1rem) * 2.2);
   margin-bottom: calc(var(--gap_v, 1rem) * 2.4);
}
	
.small	{	
	font-size:	82%;
	}
.big	{	
	font-size:	125%;;
	}		
.p_ext {
	line-height: 130%;
}
.bezi {
	margin-top: 0.2em;
 	font-size: 82%;
}
.hinws {
	font-style: italic;
}
.mittig {
	text-align: center;
}
.img_mittig {    /*  img in ein <div class="img_mittig">...</div> einbetten!!  */
	 width: 100%;
	 height: 100%;
    display: flex; 
    justify-self: center; 
    align-self: center;
}
.div_mittig {    /*  Elemente in ein <div class="div_mittig">...</div> einbetten!!  */
    display: flex; 
    justify-content: center; 
	 align-content: center;
    align-items: center;
}
.logo2 {
		margin-top: 0.5em;
		width: 11em;
}
.t_rot {
	color: #FF0000;
}
.flore {
	float: right; 
	margin-bottom: 0.7em;
	margin-left: 0.9em;
}
.floli {
	float: left;
	margin-bottom: 0.7em;
	margin-right: 0.9em;
}
.clearb {
	clear:both;
}

.lastline {
	margin-bottom: 0;
}
.Hinw_Block {
display: block;
}
.Hinw_Block div {
display: flex;
}
.Hinw_Block a:hover, a:has(> img.SocMed) {
background-color: transparent;
}
.SocMedLinks {
display: flex;
align-items: space-around;
align-content:  space-around;
justify-items: space-around;
justify-content: space-around;
}
.SocMed {
display: inline;
height: 1.2em;
width: auto;
}
.Exist {
display: flex;
align-content: space-around;
justify-content: space-around;
margin-top: var(--gap_v, 1rem);
}
.Exist img {
height: 3.2em;
width: auto;
}


/*  hier folgen verschiedene hover-Effekte mit zwei Ebenen, mit Drehungen, etc.  */

/*  ... hover-Effekt - doppelseitiges Element dreht sich um die vertikale Achse ...  */

.kontainer {
  position: relative;
  margin: 0 auto;
  width: 100%;
  perspective: 2600px;
}
.kontainer * {
  user-select: none;
}
.kt_image {
  will-change: transform;
  display: block;
  width: 100%;
  height: auto;
  background-color: var(--side_color_light, #8EB8E1);
  backface-visibility: hidden;
-webkit-backface-visibility: hidden; /* Für Safari */
  transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
}
.turn2a {
  transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
}
.kt_overlay {
  will-change: transform;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--mark_color, #E35F0D);
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
-webkit-backface-visibility: hidden; /* Für Safari */
  transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.kt_overlay_pic {
  will-change: transform;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: transparent;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
-webkit-backface-visibility: hidden; /* Für Safari */
  transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.turn2b {
	transform: rotateY(-180deg);)
-webkit-transform: rotateY(-180deg);)
}
.kt_image, .kt_overlay, .kt_overlay_pic {
  transition: transform 1.6s ease;
  transform-style: preserve-3d;
-webkit-transform-style: preserve-3d; /* Für Safari */
}
.kontainer:hover .kt_image {
  transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
}
.kontainer:hover .turn2a {
  transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.kontainer:hover .kt_overlay, .kontainer:hover .kt_overlay_pic {
  transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
}
.kontainer:hover .turn2b {
  transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
}
.kt_text {
  color: var(--verybright_color, #FAFBFE); 
  font-size: 1.4em;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  backface-visibility: hidden;
-webkit-backface-visibility: hidden; /* Für Safari */
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}

/*  ... hover-Effekt - überlagernde Ebene zieht sich nach unten zusammen oder seitlich weg ...  */

  .pic_container {
  	 position: relative;
  	 width: 100%;
  	 height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }  
  .pic_container p, .pic_container h1, .pic_container h2, .pic_container h3 {
	 user-select: none;
  }
  .piccard {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    background: var(--verybright_color, #FAFBFE);
    border-radius: var(--cornerRad, 5px);
  }
  .piccard .face {
  	 overflow: hidden;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1em;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--cornerRad, 5px);
  }
  .piccard .faceB {
  	 width: 100%;
  	 height: 100%;
  	 position: relative;
    box-sizing: border-box;
  }
  .piccard .faceB h3 {
    font-size: 1.1em;
  	 margin: 0.8em 0.3em 0.8em 0.3em;
  }
  .piccard_content {
    margin: 0;
    padding: 0;
  }
  .piccard .faceB > .piccard_content {
    padding: 0;  
  }
  .piccard_content img {
  	   border-radius: var(--cornerRad, 5px) var(--cornerRad, 5px) 0 0;
		width: auto;
		max-height: 40vh;
  }
  .piccard .faceA {
    will-change: auto;
  	 position: absolute;
  	 width: 100%;
  	 height: 100%;
    background: linear-gradient(-12deg, var(--main_color_dark, #001D37), var(--side_color_light, #8EB8E1));
    transition: 0.5s;
  }
  .piccard .faceA h2 {
  	 margin: 0.8em 0.3em 0.8em 0.3em;
    font-size: 2.2em;
    font-weight: 600;
    text-align: center;
    color: var(--verybright_color, #FAFBFE);
    transition: 0.5s;
  }
  .piccard:hover .faceA {
    border-radius: 0 0 var(--cornerRad, 5px) var(--cornerRad, 5px);
    height: 0;
  }

/*  ... hover-Effekt - seitliches auseinander gleiten ...  */

.card_container {
	display: block;
	position: relative;
	width: 100%;
	min-height: 15.4em;
}
.card_container * {
	user-select: none;
}
.card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.card .card_face {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color: var(--verybright_color, #FAFBFE);
}
.card .card_face .card_icon {
    position: absolute;
	 max-width: 50%;
	 max-height: 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.card_content {
	 font-size: inherit;
	 color: var(--scripture_color, #141414);
}
.card .card_slide {
    will-change: transform;
    width: 20em;
    height: 12em;
    top: -6em;
    left: -10em;
}
.card .card_slide.card_slide1 {
    z-index: 1;
    background-color: var(--main_color, #003862);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5em;
    transition: 0.8s;
    transform: translateX(0);
-webkit-transform: translateX(0);
}
.card:hover .card_slide.card_slide1{
    transform: translateX(-10em);
-webkit-transform: translateX(-10em);
}
.card .card_slide.card_slide2 {
	 background-color: var(--bright_color, #E1ECF9);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5em;
    transition: 0.8s;
    transform: translateX(0);
-webkit-transform: translateX(0);
}
.card:hover .card_slide.card_slide2{
    transform: translateX(10em);
-webkit-transform: translateX(10em);
}
.card .card_slide.card_slide2 .card_content p {
    margin: 0;
    padding: 0;
    text-align: center;
}
.card .card_slide.card_slide2 .card_content h2 {
    margin: 0;
    padding: 0;
    text-align: center;
    font-weight: 600;
    font-size: 1.3em;
    line-height: 2.1em;
} 

.no_b_marg {
	margin-bottom: 0;
}

/*  FOOTER  -----------------------------------  */

#foot_bar {
	display: grid;
	grid-area: ho9 / links / unten / rechts;
	background-color: var(--main_color_dark, #001D37);
}
footer {
	display: grid;
	grid-area: ho9 / ve1 / unten / ve7;

	font-size: 1.2em;
	padding: calc(var(--gap_v, 2rem) / 2.5) 0;
}
footer * {
	font-family: 'open-sans-semicondensed', 'open-sans', Helvetica, sans-serif;
	font-weight: 400;
	color: var(--bright_color, #E1ECF9);
}
footer ul  {
  margin-left: 0;  
}
footer li  {
  list-style-type: none;
  display: inline-block;
  padding: 0 1em 0 0.4em;
  margin: 0.25em 0;
  border-left: 0.2em solid var(--main_color_light, #4F90C9);  
}
footer p {
	margin:0;
	padding: 0.02em 0.3em;
}
footer a {
	color: var(--verybright_color, #FAFBFE);
	text-decoration: underline;
	outline: none;
	margin:0;
	padding: 0.1em 0.3em;
	border-radius: 0.15em;
}
footer a:hover { 
	background-color: var(--bright_color, #E1ECF9); 	
	color: var(--scripture_color, #141414); 
	text-decoration: none;
	outline: none;
}


/* ================  LAYOUT-Anpassungen für schmalere Bildschirme, Tablets und Handys  ======================== */

@media screen and (max-width: 74rem) {

:root {    /*   Farben,  Abstände  und  Größenangaben:   */
--gap_A: 0.5rem;  /*  var(--gap_A, 0rem);  Außenrand  */
--gap_h: 2.5rem;  /*  var(--gap_h, 2rem);  */
--gap_v: 1rem;  /*  var(--gap_v, 1rem);  */
--gap_t: 2.5rem;  /*  var(--gap_t, 1rem);  Top-gap vor etstem Eintrag  */
--rand: 0.75rem;     /*  var(--rand, 0.5rem);  */
--logo_height: 2.7rem;     /*  var(--logo_height, 3rem);  */
}

body {
	font-size: 96%;
}
	h1 { 
		font-size: 1.5em; 
		margin-bottom: 1.2em; }
	h2 { 
		font-size: 1.3em; }
	h2 span { 
		font-size: 0.7em; }
	h3	{ 
		font-size: 1.15em; }		
	p, ul {
 	font-size: 0.95em; 
	}

.X011i {
    display: inline;
}
.X011b {
    display: block;
}
.X011ib {
    display: inline-block;
}
.X011f {
    display: flex;
}
.X011g {
    display: grid;
}
.X011li {
	 display: list-item;
}
.X100i {
    display: none;
}
.X100b {
    display: none;
}
.X100ib {
    display: none;
}
.X100f {
    display: none;
}
.X100g {
    display: none;
}

.head_logo {
	margin: 0.3rem 0;
}
.navi-right a {
	width: 4.7em;
	padding: 0.35em 0;
	font-size: 1.1em;
	line-height: 1.5em;
}

section.fcs_more {
    flex: 1 45%;
}
section.fcs_less {
    flex: 1 35%;
}

.logo2 {
	width: 9.4em;
}
.kt_text {
  font-size: 1.2em;
}
.kt_stext div {
		font-size: 2.4em;	
}
.piccard .faceA h2{
    font-size: 1.8em;
}
.card_container {
	min-height: 13em;
}
.card .card_slide {
    width: 16em;
    height: 9.6em;
    top: -4.8em;
    left: -8em;
}
.card:hover .card_slide.card_slide1{
    transform: translateX(-8em);
-webkit-transform: translateX(-8em);
}
.card:hover .card_slide.card_slide2{
    transform: translateX(8em);
-webkit-transform: translateX(8em);
}
.card .card_slide.card_slide2 .card_content h2 {
    font-size: 1.1em;
    line-height: 2.0em;
} 

}

/*  ab hier Anpassungen für Smartphones etc.  */

@media screen and (max-width: 44rem) {

:root {    /*   Farben,  Abstände  und  Größenangaben:   */
--gap_A: 0rem;  /*  var(--gap_A, 0rem);  Außenrand  */
--gap_h: 1rem;  /*  var(--gap_h, 2rem);  */
--gap_v: 0.6rem;  /*  var(--gap_v, 1rem);  */
--gap_t: 1.2rem;  /*  var(--gap_t, 1rem);  Top-gap vor etstem Eintrag  */
--rand: 0.5rem;     /*  var(--rand, 0.5rem);  */
--logo_height: 2.3rem;     /*  var(--logo_height, 3rem);  */
}

body {
	font-size: 90%;
}
h1 { 
	font-size: 1.4em;
	margin-bottom: 1.1em;
}

.X001i {
    display: inline;
}
.X001b {
    display: block;
}
.X001ib {
    display: inline-block;
}
.X001f {
    display: flex;
}
.X001g {
    display: grid;
}
.X110i {
    display: none;
}
.X110b {
    display: none;
}
.X110ib {
    display: none;
}
.X110f {
    display: none;
}
.X110g {
    display: none;
}

.head_logo {
	margin: 0.15rem 0;
}
	
nav {    /*  das offene Navi (nav) wird auf sehr schmalen Bildschirmen hier ausgeblendet!  */
	display: none;
}

/*  das Hamburger-Navi (navi_d) für Smartphones und sehr schmale Bildschirme bzw. Fenster  */

details.navi_d {
  float: right;

  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

details.navi_d > summary {
  display: block;
  position: absolute;
  top: 0.35rem;
  right: calc(var(--gap_A, 1rem) + 0.2rem);
  padding: 0;
  margin: 0;
  list-style: none;
  max-width: 2.5rem; /* oder passend zu deinem Design */
/*  overflow: hidden;  */
  white-space: nowrap;

  writing-mode: vertical-lr;
  font-family: 'osi-sys', 'open-sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 2.4rem;
  background-color: var(--main_color, #003862);
  color: var(--verybright_color);
  cursor: pointer;
  user-select: none;
  outline: none;
}

details.navi_d > summary::before,
details.navi_d > summary::after {
  display: block;
  padding: 0;
  margin: 0;
  list-style: none;
/*  max-width: 2.5rem; oder passend zu deinem Design */
/*  overflow: hidden;  */
  white-space: nowrap;
}

details.navi_d > summary::before {
  content: "";
}
details.navi_d > summary::after {
  content: "III";
}
details.navi_d > summary::marker {
  font-size: 0;
}
details.navi_d > summary::-webkit-details-marker {
  display: none;
}
details.navi_d[open] #h_nav {
  animation-name: menuAnim;
}
details.navi_d[open] summary::before {
  content: "X";
}
details.navi_d[open] summary::after {
  content: "";
}
#h_nav {
  z-index: 18;
  position: absolute;
  top: 3.3em;
  right: var(--rand);
  height: 0;
  width: auto;
  padding: 0 0.85em;
  font-family: 'open-sans-semicondensed', 'open-sans', Helvetica, sans-serif;
  color: var(--verybright_color, #FAFBFE);
  border-radius: var(--cornerRad, 5px);
  background-color: var(--main_color, #003862); 
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.7);
  animation: closeMenu 25ms ease-in-out forwards;
}
#h_nav a {
  display: block;
  margin: 0.4em 0;
  background-color: var(--pertol);
  border-radius: var(--cornerRad, 5px);
  padding: 0.35em 1.0em;
  color: var(--verybright_color);
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
  font-size: 1.2em;
  font-weight: 400;
  text-decoration: none;
  text-align: center;
  transition: filter 200ms linear 0s;
}
#h_nav a:nth-of-type(1) {
  margin-top: 0.7em;
}
#h_nav a:nth-last-of-type(1) {
  margin-bottom: 0.7em;
}
#h_nav a:hover {
  background-color: var(--bright_color, #E1ECF9);  
  color: var(--main_color_dark, #001D37);
}
#h_nav a.active {
  background-color: var(--main_color_light, #4F90C9); 
  color: var(--verybright_color, #FAFBFE);  
}
#h_nav a.active:hover {
    background-color: var(--main_color_light, #4F90C9); 
}

.flex_cont {
     margin-left: 0;
     margin-right: 0;
}
.flex_cont section, .flex_cont article {
    margin-left: 0;
    margin-right: 0;
}
.fc_di section {
	flex: 1 100%;  /* Alle Kindelemente werden über die volle Breite dargestellt */
}
.fc_tri section {
	flex: 1 100%;  /* Alle Kindelemente werden über die volle Breite dargestellt */
}

.small	{	
	font-size:	88%;
	}
.reduce {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}
.blowup {
	width: 100%;
}
.logo2 {
		width: 6em;
}
.hr_straight {
   margin-top: calc(var(--gap_v, 1rem) * 3);
   margin-bottom: calc(var(--gap_v, 1rem) * 3);
}

.Hinw_Block {
justify-content: space-between;
}
.SocMedLinks {
justify-content: flex-start;
}
.SocMed {
margin-right: 2em;
}
.Exist {
justify-content: flex-start;
margin-top: calc(var(--gap_v, 1rem) * 2);
}
	
.kontainer {
	perspective: 1400px;
}
.turn2b {
	transform: rotateY(180deg);)
-webkit-transform: rotateY(180deg);)
}
.kt_text {
  font-size: 1.3em;
}
.kontainer:hover .turn2a {
  transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
}	
.kt_stext div {
	font-size: 1.2em;	
}
.piccard .face {
   padding: 0.3em 0;
}
.piccard .faceA h2 {
   font-size: 1.4em;
}
.piccard:hover .faceA h2 {
   font-size: 1em;
}

}