@charset 'UTF-8';

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var, center, dl, dt, dd, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin                   :     0;
	padding                  :     0;
	border                   :     0;
	font-size                :   100%;
	font                     : inherit;
	vertical-align           : baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display                  : block;
}

body {
	line-height              :     1;
}
/*
ol, ul {
	list-style               : none;
}
*/
blockquote, q {
	quotes                   : none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content                  : '';
	content                  : none;
}

table {
	border-collapse          : collapse;
	border-spacing           :     0;
}


body {
	background               : #FCFBFF;
	color                    : #113C66;
	font-family              : Verdana, Tahoma, Arial, Helvetica, sans-serif;
	line-height              :     1.2em;
	font-size                :     1.1em;
}

div, main {
	position                 : relative;
	overflow                 : hidden;
}

#main {
	margin                   : 10px 5px;
}

#main .main_dist {
	margin                   : 0px 12px;
}

nav, #zusatz {
	display                  : none;
	z-index                  :     2;
}

footer {
	border-top               : solid 1px #CAD1DE;
	font-size                :     0.8em;
	z-index                  :     2;
}

#nav_footer, #mobilnav_div {
	display                  : none;
}

#mobilnav_link {
	position                 : fixed;
	bottom                   :     0px;
	left                     :     0px;
	right                    :     0px;
	height                   :     2.7em;
	z-index                  :     9;
	color                    : #FCFBFF;
	background               : #113C66;
}

#mobilnav_div {
	position                 : fixed;
	top                      :     0px;
	bottom                   :     0px;
	left                     :     0px;
	right                    :     0px;
	z-index                  :     8;
	background               : #FCFBFF;
}

#mobilnav_div div {
	position                 : relative;
	margin-bottom            :     6em;
	text-align               : center;
}

#div_BG {
	top                      :    0;
	left                     :    0;
	right                    :    0;
	bottom                   :    0;
	background               : #EBEFFA;
	position                 : fixed;
	z-index                  :    1;
}

#div_center {
	background               : #FCFBFF;
	margin                   : 0 auto;
	padding                  : 0;
	z-index                  :     2;
}

#wRS {
	hight                    :    3em;
	width                    :  120px;
	right                    :    5px;
	bottom                   :    5px;
	text-align               : center;
	background               : yellow;
	position                 : fixed;
	z-index                  :   99;
}


@font-face {
  font-family: 'Caveat';
  src: url('/fonts/Caveat-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Caveat';
  src: url('/fonts/Caveat-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Caveat';
  src: url('/fonts/Caveat-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lora';
  src: url('/fonts/Lora-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

html {
  font-size: 16px; /* 1rem = 16px */
}

body {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #113C66;
}

h1, h2, h3, h4 {
  font-family: 'Caveat', cursive;
  line-height: 1.2;
  margin-bottom: 0.5em;
	font-weight:bold;
}

h1 { font-size: 1.8rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
h4, h5, h6 { font-size: 1rem; }

h1 {
	color                    : #113C66;
	margin-bottom            :   10px;
	padding                  : 3px 12px;
}

h2 {
	margin-top               :    1.8em;
	color                    : #479541;
}

h1, h2 {
	font-variant             : small-caps;
	letter-spacing           :     0.1em;

}

h3 {
	font-variant             : small-caps;
	margin-top               :    1.2em;
	letter-spacing           :    1px;
}

h4, h5, h6 {
	margin-top               :    18px;
	letter-spacing           :     0.5px;
}

ul {
	list-style-type          : disc;
}

ol {
	list-style-type          : decimal;
}

img {
	border                   :     0;
}

p {
	margin-top               :     0.4em;
}

select, textarea, input[type='text'], input[type='email'], input[type='password'] {
	background               : white;
	min-width                :   220px;
	padding               : 0.25em;
	border                   : solid 1px #113C66;
}

select:focus, textarea:focus, input[type='text']:focus, input[type='email']:focus, input[type='password']:focus {
	border                   : solid 1px #4169e1;
}

button, input[type='button'], input[type='submit'] {
	letter-spacing           :     0.2em;
	background               : #113C66;
	color                    : white;
	font-variant             : small-caps;
	border                   : solid 1px #113C66;
	cursor                   : pointer;
	min-width                :   220px;
	border-radius            :     6px;
	padding                  : 2px 40px;
}

input[type='button']:hover, input[type='submit']:hover {
	color                    : #EBEFFA;
}

.nav_b4s_input {
	background-color     : #FF5F00;
	border-radius        : 12px;
	padding              : 1em 0.5em;
	margin               : 2em 0.2em;
	text-align           : center;
}

#mobilnav_link:hover {
	cursor                   : pointer;
}

#mobilnav_text, #mobilnav_div p {
	text-align               : center;
}

#mobilnav_div {
	padding-top              :    2em;
	overflow                 : scroll;
}

.neugl {
	margin-top               :    3em;
}

a {
	letter-spacing           :    1px;
	text-decoration          : none;
	color                    : #4169e1;
}

a:hover {
	color                    : #4169e1;
	text-decoration          : underline;
}

.no_hover:hover {
	text-decoration          : none;
}

a.a_aktiv {
	text-decoration          : underline;
}

sup, sub {
	font-size:0.6rem;
}

header {
	text-align               : center;
	margin-bottom            :     25px;
	border-bottom            : solid 3px #EBEFFA;
}

	header p {
		text-align:center;
		letter-spacing:0.1em;
	}

#div_center {
	padding-bottom            :    20px;
}


#main {
	padding-bottom           :     5em;
}

footer p {
	text-align               : center;
	margin-bottom            :    30px;
}

.f_CR {
	padding-bottom           :   60px;
}

.noS1 {
	display                  : none;
}

.bildnachweis {
}

.bildnachweis img {
	border                   : solid #CAD1DE 1px;
}

.clear_both {
	clear                    : both;
}

ol li, ul li {
	margin-top               :     0.2em;
	margin-bottom            :     0.4em;
}

#start_found, #start_reg {
	margin-bottom            :    12px;
	padding                  : 6px 10px;
	height                   :    55px;
	border-radius            :     6px;
	min-width                :   360px;
	height                   :   300px;
	border                   : solid 1px #CAD1DE;
}

#start_found p, #start_reg p {
}

#start_found .b_headline, #start_reg .b_headline {
	letter-spacing           :     0.1em;;
	font-variant             : small-caps;
	margin-bottom            :     1em;
	border-bottom            : solid 1px #CAD1DE;
}

#start_found {
	color                    : #FCFBFF;
	color                    : #113C66;
	background               : #3977C5;
	background               : #FFE5C2;
}

#start_reg {
	color                    : #113C66;
	background               : #E8F5D9;
}

#start_found .b_sub, #start_reg .b_sub {
	margin-bottom            :    1.3em;
}

.start_found_b, .start_reg_b {
	width                    :   260px;
	height                   :    50px;
	color                    : #EBEFFA;
	border-radius            :     6px;
	border                   : solid 1px #EBEFFA;
}

.start_found_b {
	background               : #E8F5D9;
	background               : #FF9A3D;
}

.start_reg_b {
	background               :  #479541;
}

.b_input {
	min-width                :    10px !important;
	width                    :     4em;
	text-align               : center;
}

#start_found .b_reg {
	color                    : #FF9A3D;
	margin-bottom            :    1.3em;
}

#start_found .b_add {
	margin-top               :    12px;
}

#start_reg .b_done {
	color                    : #479541;
	margin-bottom            :    1.3em;
}

  .faq-item p {
    display: none;
	margin-left:2em;
  }

  .faq-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
	margin-left:0.5em;
  }

  .faq-toggle span.symbol {
    margin-right: 8px;
    transition: transform 0.2s ease;
    display: inline-block;
  }

  .faq-item.open p {
    display: block;
  }

  .faq-item.open .symbol {
    transform: rotate(62deg);
  }

.div_logo {
	background               :  #113C66;
}

.pic_story {
	float                    : left;
	width                    :    46%;
	padding                  :     2%;
}

.pic_story img {
	width                    :   100%;
}

.pic_example {
	float                    : left;
	width                    :    12%;
}

.pic_example img {
	padding: 5px;
	width                    :   100%;
}

.pic-left, .pic-right {
	margin-top               : 1em;
	width                    :   100%;
}

/* ===== Lightbox Overlay ===== */
.lb-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 18px;

	background: rgba(0, 0, 0, 0.88);
	-webkit-tap-highlight-color: transparent;

	/* iOS safe areas */
	padding-top: calc(18px + env(safe-area-inset-top));
	padding-right: calc(18px + env(safe-area-inset-right));
	padding-bottom: calc(18px + env(safe-area-inset-bottom));
	padding-left: calc(18px + env(safe-area-inset-left));
}

.lb-overlay.is-open {
	display: flex;
	animation: lbFadeIn 160ms ease-out;
}

@keyframes lbFadeIn {
	from { opacity: 0; }
	to	 { opacity: 1; }
}

body.lb-no-scroll {
	overflow: hidden;
	touch-action: none; /* reduziert "hintergrund scroll" auf mobile */
}

/* ===== Dialog / Layout ===== */
/* ===== Grundzustand ===== */
.lb-prev,
.lb-next,
.lb-prev-bottom,
.lb-next-bottom {
	display: none;
}

/* ========================= */
/* ===== LANDSCAPE ========= */
/* ========================= */
@media (orientation: landscape) {

	/* Seitliche Buttons aktiv */
	.lb-prev,
	.lb-next {
		display: inline-flex;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

	.lb-prev	{ left: -70px; }
	.lb-next	{ right: -70px; }

	/* Bottombar komplett aus */
	.lb-bottombar {
		display: none;
	}
}

/* ========================= */
/* ===== PORTRAIT ========== */
/* ========================= */
@media (orientation: portrait) {

	/* Stage Buttons aus */
	.lb-prev,
	.lb-next {
		display: none;
	}

	/* Bottombar sichtbar */
	.lb-bottombar {
		display: flex;
		justify-content: center;
		gap: 12px;
	}

	.lb-prev-bottom,
	.lb-next-bottom {
		display: inline-flex;
		flex: 1;
		max-width: 220px;
		justify-content: center;
	}
}
.lb-dialog {
	position: relative;
	width: min(1200px, 100%);
	max-height: 92vh;

	display: grid;
	grid-template-rows: auto 1fr auto; /* topbar, image, bottombar */
	gap: 12px;

	outline: none;
}

/* Topbar (mobile: close+counter; desktop auch ok) */
.lb-topbar,
.lb-bottombar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.lb-topbar {
	justify-content: center;
	position: relative;
	min-height: 40px;
}

/* Counter */
.lb-counter {
	color: rgba(255, 255, 255, 0.92);
	font: 13px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	background: rgba(0, 0, 0, 0.35);
	padding: 6px 10px;
	border-radius: 999px;
	user-select: none;
}

/* Bildfläche */
.lb-stage {
	position: relative;
	display: grid;
	place-items: center;

	/* verhindert Overscroll/Zoom-Glitches bei swipes */
	touch-action: pan-y;
}

.lb-img {
	max-width: 100%;
	max-height: 80vh;
	object-fit: contain;
	border-radius: 14px;

	box-shadow: 0 18px 60px rgba(0,0,0,.35);
	user-select: none;
	-webkit-user-drag: none;

	/* Smooth appearance */
	opacity: 0;
	transform: translateY(4px) scale(0.985);
	transition: opacity 170ms ease, transform 170ms ease;
}

.lb-img.is-ready {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* Optional caption (aus alt) */
.lb-caption {
	margin-top: 10px;
	color: rgba(255,255,255,.85);
	font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	text-align: center;
	max-width: 80ch;
	padding: 0 8px;
}

/* ===== Buttons ===== */
.lb-btn {
	border: 0;
	cursor: pointer;
	max-width:180px;
	min-width:  80px;

	color: #fff;
	background: rgba(255,255,255,0.14);
	backdrop-filter: blur(6px);

	padding: 10px 14px;
	border-radius: 999px;
		justify-content: center;

	font: 600 16px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

	transition: transform 120ms ease, background 120ms ease, opacity 120ms ease;
	user-select: none;
}

.lb-btn:hover { background: rgba(255,255,255,0.20); }
.lb-btn:active { transform: scale(0.96); }
.lb-btn:focus-visible { outline: 2px solid rgba(255,255,255,0.55); outline-offset: 2px; }

.lb-btn[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* Icon-ish look */
.lb-btn--close {
	position: absolute;
	right: 0;
	top: 0;
	padding: 9px 12px;
}

/* ===== Desktop: Prev/Next als seitliche Floating Buttons ===== */
@media (orientation: landscape) {
	.lb-dialog {
		grid-template-rows: auto 1fr auto;
		gap: 14px;
	}

	.lb-bottombar {
		justify-content: center;
	}

	.lb-prev,
	.lb-next {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

	.lb-prev { left: -15px; }
	.lb-next { right: -15px; }

	/* bottom nav ist eher optional, aber wir lassen sie sichtbar */
	.lb-bottombar {
		gap: 16px;
	}
}

/* ===== Mobile: Buttons oben/unten, keine Überlappung ===== */
@media (max-width: 819px) {
	.lb-topbar {
		justify-content: center;
		padding: 0 48px; /* Platz für close rechts */
	}

	.lb-bottombar {
		justify-content: center;
	}

	.lb-prev, .lb-next {
		flex: 1 1 0;
		max-width: 220px;
	}
}






@media(min-width: 530px) {

.header_headline img {
	width                    :   320px;
}

#main {
	margin                   : 10px 20px;
}

#div_center {
	z-index                  :     4;
}

#start_found, #start_reg {
	padding                  : 12px 40px;
	min-width                :   400px;
}

footer {
	border-top               : none;
}

.noT {
	margin-top               :     2.5em;
}

.noS1 {
	display                  : inline;
}

.doS1 {
	display                  : none;
}

}