@charset "UTF-8";

:root {
	--gruen-dunkel: #003537;
	--gruen-hell: #005437;

	--eierschale: #fff8dc;
	--sand: #c69c6d;

	--anthrazit: #222629;
	--anthrazit-dunkel: #17191b;

	--content-width: 1200px;

	--shadow-main:
		4px 3px 5px rgba(0,0,0,0.75);

	--radius-box: 5px;
	--radius-button: 14px;
	--radius-nav-button: 9px;
	
	--image-border: 12px;

	--transition-fast: 0.2s ease;
	--transition-medium: 0.35s ease;
	
	--menu-background-scrolled: rgba(0, 53, 55, 0.95);
	
	--header-offset: 0px;
}

/* input:focus, button:focus, a:focus, summary:focus { outline: none; } */
/* Browserseitiger Focus-Rahmen */
/* Nur ändern, wenn es per Maus/Touch passiert */
*:focus:not(:focus-visible) {
  outline: none;
}
/* Eigene Farbe für reine Tastaturnavigation */
:focus-visible {
  outline: 1px solid rgba(251,241,211,0.5);
}


@media (max-width: 650px) {
	:root {
		--image-border: 8px;
	}
}


* {
	box-sizing: border-box;
}

/*html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	background: transparent; 
}*/

html {
	margin: 0;
	padding: 0;

	width: 100%;
	min-height: 100%;
	
	scroll-behavior: smooth;
	
	scroll-padding-top: var(--header-offset, 0px); /*Offset für nicht-verdeckte Anker-Sprünge bei sticky-Header; wenn var nicht definiert = 0px */
}

body {
	margin: 0;
	padding: 0;

	width: 100%;
	min-height: 100vh;

	overflow-x: hidden;

	background: var(--gruen-dunkel); /*transparent;*/

	position: relative;
	
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	color: var(--eierschale);
	line-height: 1.7;
	font-size: 18px;
}

#bg-canvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
	/* Fallback-Farbe */
	background-color: var(--gruen-dunkel); /*#0B3C1D; */
}

@media print {
	#bg-canvas { display: none; }
}

.content { /* not used */
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-weight: 300;
	color: white;
	text-align: center;
	padding-top: 30vh;
}


a {
	color: var(--sand);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover,
a:focus,
a:active {
	color: var(--eierschale);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

main {
	position: relative;
	z-index: 2;

	width: min(calc(100% - 60px), var(--content-width));
	margin: 0 auto;

	/*padding-top: 6rem;
	padding-bottom: 8rem;*/
}

/* Größere vertikale Abstände */
.section-spacing {
	margin-top: 8rem;
}
/* aber nicht nach Zwischenüberschrifts-Sektion */
.zwischenueberschrift + .section-spacing {
	margin-top: 2rem; 
}
.section-spacing-half {
	margin-top: 4rem;
}


@media (max-width: 700px) {

	.content {
		width: calc(100% - 28px);
		padding-top: 4rem;
	}

	.section-spacing {
		margin-top: 5rem;
	}
	
	.section-spacing-half {
		margin-top: 2.5rem;
	}

	body {
		font-size: 16px;
	}
}


/* Header & Menu */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;

	padding-top: 6rem;

	transition:
		background 0.35s ease,
		backdrop-filter 0.35s ease;
}

@media (max-height: 900px) {
  .site-header {
    position: static;
  }
}

.header-inner {
	display: flex;
	flex-direction: column;
	align-items: center;

	width: min(calc(100% - 60px), var(--content-width));
	margin: 0 auto;
}

.main-logo-link {
	display: inline-block;
}

.main-logo {
	width: min(70vw, 820px);
	height: auto;

	transition:
		width 1.35s ease,
		transform 1.35s ease;
}

.main-nav {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	flex-wrap: wrap;

	margin-top: 2rem;

	opacity: 0;
	transform: translateY(-10px);

	pointer-events: none;

	transition:
		opacity 0.35s ease,
		transform 0.35s ease;
}

.main-nav a {
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-weight: 300;
	font-size: 1.6rem;
	letter-spacing: 0.04em;
	margin-bottom: -1.2em;
	text-wrap: nowrap;

	color: var(--eierschale);
}

.main-nav a.cta-button {
	color: var(--sand);
}

.main-nav a.cta-button:hover {
	color: var(--eierschale);
}

.main-nav a:hover:not(.cta-button),
.main-nav a:focus:not(.cta-button),
.main-nav a:active:not(.cta-button),
.main-nav .aktiv {
	color: var(--sand);
}

.main-nav .cta-button {
	box-shadow: none;
	padding: 0.35rem 1.25rem;
	border-radius: var(--radius-nav-button);
}

.header-divider {
	width: 100%;
	height: 2px;

	margin-top: 1.6rem;

	background: var(--anthrazit);

	opacity: 0;
	transition: opacity 0.35s ease;
}

/* Sticky-Zustand */
.site-header.scrolled {
	padding-top: 2rem;

	background: var(--menu-background-scrolled);
	backdrop-filter: blur(15px);
}

.site-header.scrolled .main-logo {
	width: min(42vw, 250px);
}

.site-header.scrolled .main-nav {
	display: flex;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
	margin-bottom: 1.5em;
}

.site-header.scrolled .header-divider {
	opacity: 1;
}

/* CTA im Header (und später) */
.cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding:
		0.85rem 1.5rem;

	border-radius: var(--radius-button);

	background: var(--anthrazit);

	color: var(--sand);

	border: 1.5px solid var(--sand);

	box-shadow: var(--shadow-main);

	transition:
		background var(--transition-fast),
		transform var(--transition-fast);
		
	transform: rotate(-2deg);
}

.nav-cta {
	font-size: 0.98em !important;
}

.cta-button:hover,
.cta-button:focus,
.cta-button:active {
	background: var(--anthrazit-dunkel);
	color: var(--eierschale);
	border-color: var(--eierschale);

	/*transform: translateY(-2px);*/
	transform: rotate(-1deg) translateY(+1px);
}

@media (max-width: 850px) {

	.main-nav {
		flex-wrap: wrap;
		gap: 1.8rem 1.5rem; /*1rem 1.5rem; wenn ohne verkleinerten Button */
	}

	.main-nav a {
		font-size: 1.3rem;
		margin-bottom: -0.8em;
	}
	
	.site-header.scrolled .main-nav {
		margin-bottom: 0.6em;
	}
}

@media (max-width: 600px) {

	.site-header {
		padding-top: 2rem;
	}

	.main-logo {
		width: 72vw;
	}

	.site-header.scrolled .main-logo {
		width: min(55vw, 250px);
	}

	.main-nav {
		margin-top: 1.5rem;
	}
}

/* Footer */
.site-footer {
	margin-top: 10rem;

	background: var(--anthrazit);

	padding:
		4rem 0;
}

.footer-inner {
	width: min(calc(100% - 60px), var(--content-width));
	margin: 0 auto;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 3rem;
}

.footer-logo {
	width: 180px;
	height: auto;
}

.footer-left p {
	margin-top: 1rem;
	margin-bottom: 0;

	font-size: 0.85rem;
}

.footer-nav {
	display: flex;
	flex-direction: row; /*column;*/
	gap: 2.0rem; /*.8rem;*/
	flex-wrap: wrap;
	justify-content: center;
}

.footer-nav a {
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-size: 1.5rem;
	line-height: 0.7em;
}

.footer-nav a.aktiv {
	color: var(--eierschale);
}

.footer-toplink img {
	width: 72px;
	height: auto;

	transition: transform 0.25s ease;
}

.footer-toplink:hover img {
	transform: translateY(-4px);
}

.footer-socialicons {
	display: flex;
	flex-direction: row; /*column;*/
	gap: 1.0rem; /*.8rem;*/
	flex-wrap: nowrap;
	justify-content: center;
	position: relative;
	bottom: 0.05em;
	font-size: 1.3em;
}

@media (max-width: 850px) {

	.site-footer {
		margin-top: 4rem;
	}
	
	.footer-inner {
		flex-direction: column;
		text-align: center;
	}
	
	.footer-left {
		text-align: center;
	}
	
	.footer-left img {
		display: inline;
	}

	.footer-nav {
		align-items: center;
	}
}


/* CONTENT-ELEMENTE **/

.zwischenueberschrift {
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-size: clamp(2rem, 4vw, 3.2rem);
	text-align: center;
	text-shadow: var(--shadow-main);
	line-height: 1.3em;
}

.weisstext_big {
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-size: clamp(2rem, 4vw, 3.2rem);
	text-align: center;
	text-shadow: var(--shadow-main);
	line-height: 1.3em;
}

/* Foto-/Video-Content */
.media-center {
	text-align: center;
}

.media-polaroid {
	display: inline-block;

	max-width: min(80%, 750px);

	padding: var(--image-border);
	background: var(--eierschale);

	border-radius: var(--radius-box);

	box-shadow: var(--shadow-main);
}

.media-polaroid.small {
	max-width: min(60%, 450px);
}

.rotate-left {
	transform: rotate(-2deg);
}

.rotate-right {
	transform: rotate(2deg);
}

.split-layout {
	display: flex;
	align-items: normal;
	gap: 4rem;
}

.split-layout.vertikalzentriert {
	align-items: center;
}

.split-layout .media-polaroid {
	max-width: min(100%, 560px);
}

.split-layout.reverse {
	flex-direction: row-reverse;
}

.split-media,
.split-content {
	flex: 1;
}

.fullsize-layout {
	display: flex;
	align-items: center;
	gap: 4rem;
	flex-direction: column;
}

@media (max-width: 900px) {

	.split-layout,
	.split-layout.reverse {
		flex-direction: column;
	}

	.split-media,
	.split-content {
		width: 100%;
		text-align: center;
	}
}

.img-hover {
	transition:
		transform var(--transition-fast);
}

.rotate-left.img-hover:hover {
	transform: rotate(-1deg) translateY(-1px);
}
.rotate-right.img-hover:hover {
	transform: rotate(1deg) translateY(-1px);
}

/* Video-Element */
.video-frame {
	display: inline-block;

	width: min(100%, 760px);

	padding: var(--image-border);
	background: var(--eierschale);
	
	border-radius: var(--radius-box);

	box-shadow: var(--shadow-main);
}

.video-frame video {
	width: 100%;
	height: auto;
	display: block;
}

/* Zitatblock */
.quote-block {
	margin: 0;

	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-weight: 300;

	color: var(--eierschale);

	text-shadow: var(--shadow-main);
}

.quote-block p {
	margin: 0;

	font-size: clamp(2rem, 5vw, 4rem);
	line-height: 1.05;
	letter-spacing: 0.01em;
}

.quote-block footer {
	margin-top: 1.5rem;

	font-size: clamp(1rem, 2vw, 1.4rem);

	opacity: 0.8;
}

.centered {
	text-align: center;
}

/* CTA-Block */
.cta-area {
	display: flex;
	flex-direction: column;
	align-items: center;

	gap: 1rem;

	text-align: center;
}

.cta-area a:not(.cta-button) {
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-size: clamp(2rem, 4vw, 3.2rem);

	text-shadow: var(--shadow-main);
}

.cta-large {
	font-size: clamp(0.5rem, 0.9rem + 0.5vw, 1.4rem); /*1.4rem;*/
	padding: 1rem 2.2rem;

	margin-top: 1rem;
}

/* Content-Boxen */
.content-box {
	padding: 2.4rem;
	width: 50%;
	border-radius: var(--radius-box);

	box-shadow: var(--shadow-main);
}

.content-box.fullwidth {
	width: 100%;
}

@media (max-width: 900px) {
	.content-box {
			width: 100%;
	}
}


.content-box h2 {
	margin-top: 0;

	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-weight: 300;

	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.2;
}

.content-box h2.alleinstehend_zentriert {
	margin-bottom: 0;
	text-align: center;
}

.content-box p + p {
	margin-top: 1.4rem;
}

.dark-box {
	background: var(--anthrazit);
	color: var(--eierschale);
}

.sand-box {
	background: var(--sand);
	color: var(--anthrazit);
}

.sand-box a {
	color: var(--gruen-hell);
}

.sand-box a:hover,
.sand-box a:focus,
.sand-box a:active {
	color: var(--gruen-dunkel);
}

/* Spiegelstrichlisten */

ul {
  list-style-type: '- ';
  margin: 0;
  padding-left: 1.2rem; /* Bestimmt das Einrücken des Bindestrichs */
}

li {
  margin: 0;
  padding: 0;
  padding-bottom: 0.5em;
}

/* Entfernt den Abstand nach unten beim Absatz vor der Liste */
p + ul {
  margin-top: 0;
}

/* Fall 1: Wenn die Liste auf einen Absatz folgt */
p:has(+ ul) {
  margin-bottom: 0;
}

/* Fall 2: Wenn nach der Liste direkt der nächste Absatz kommt */
ul + p {
  margin-top: 0;
}



/* FAQ-Section */
.faq-grid {
	/*display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	align-items: baseline;*/
	column-count: 2;
	column-gap: 1.5rem;
}

.faq-item {
	background: rgba(34,38,41,0.9);
	border-radius: var(--radius-box);
	padding: 1.4rem 1.6rem;
	box-shadow: var(--shadow-main);
	/*neu für column-layout:*/
	display: inline-block; /* Verhindert Darstellungsfehler in einigen Browsern */
	width: 100%;           /* Zwingt das Item auf die volle Spaltenbreite */
	break-inside: avoid;   /* Verhindert, dass ein Item am Spaltenende zerrissen wird */
	margin-bottom: 1.5rem; /* Ersetzt das alte 'gap' des Grids nach unten */
	
}

.faq-item summary {
	list-style: none;
	cursor: pointer;

	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-size: 2rem;
	line-height: 1.3;

	position: relative;

	padding-right: 1.8rem;
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

.faq-item summary::after {
	content: "\f107";
	font-family: FontAwesome;

	position: absolute;
	right: 0;
	top: 0;
}

.faq-item[open] summary::after {
	content: "\f106";
}

.faq-answer {
	padding-top: 1rem;
}

@media (max-width: 800px) {
	.faq-grid {
		/* grid-template-columns: 1fr; */
		column-count: 1;
	}
	.faq-item summary {
		font-size: 1.7rem;
	}
}

@media (max-width: 800px) {
	.faq-item summary {
		font-size: 1.6rem;
	}
}

/* Lightbox-Anpassungen */
/* Container/Rahmen */
.lightbox {
  rotate: -0.8deg;
}
.lb-outerContainer {
  background-color: var(--eierschale) !important; /* Deine Wunsch-Rahmenfarbe (z.B. Rot) */
  border-radius: /*var(--radius-box)*/ 7px !important;       /* Eckenradius für den Rahmen */
}
.lb-nav {
  /*filter: brightness(0) saturate(100%) invert(100%) sepia(14%) saturate(3871%) hue-rotate(308deg) brightness(104%) contrast(103%) !important; nein, Killt Safari mit hässlichem Orange :D, daher Austausch Farbe in PNG // umfärben des weißen Pfeils in --eierschale (berechnet via css-color-filter-generator) */
}
.lb-close {
  /*filter: brightness(0) saturate(100%) invert(100%) sepia(14%) saturate(3871%) hue-rotate(308deg) brightness(104%) contrast(103%) !important; nein, Killt Safari mit hässlichem Orange :D, daher Austausch Farbe in PNG //  umfärben in --eierschale (berechnet via css-color-filter-generator) */
}
.lb-caption {
  color: var(--eierschale) !important;
}
.lb-number {
  color: var(--eierschale) !important;
  /*opacity: 0.7;*/
}
.lb-image {
  outline: 8px solid var(--eierschale);
  outline-offset: -8px;
}
@media (max-width: 650px) {
	.lb-image {
  outline: 4px solid var(--eierschale);
  outline-offset: -4px;
}
}
/* Fixiert und zentriert das Lightbox-Fenster perfekt im Viewport */
#lightbox {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}
/* Verhindert, dass Standard-Margineffekte von Lightbox das CSS-Transform stören */
.lb-outerContainer, .lb-dataContainer {
    margin-left: auto !important;
    margin-right: auto !important;
}


/* =========================================================
   PROZESSABLAUF
   ========================================================= */

.prozess {
	position: relative;

	display: flex;
	flex-direction: column;

	gap: 2rem;
}


/* Verbindungslinie */

.prozess::before {
	content: "";

	position: absolute;

	left: 62px; /*58*/
	top: 55px;
	bottom: 10px; /*55*/

	width: 3px;

	background: var(--sand);

	opacity: 0.85;

	z-index: 0;
	
	box-shadow: var(--shadow-main);
}


/* Einzelner Schritt */

.prozess-schritt {
	position: relative;
	z-index: 1;

	display: grid;
	grid-template-columns: 130px minmax(0, 1fr);

	gap: 2rem;

	align-items: baseline; /* center */
}


/* Linker Bereich */

.prozess-marker {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.8rem;

	position: relative;
}


/* Nummer */

.prozess-nummer {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 52px;
	height: 52px;

	padding-top: 2px;

	background: var(--eierschale);
	color: var(--anthrazit);

	border-radius: 7px;

	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-weight: 400;
	font-size: 1.8rem;
	line-height: 1;

	box-shadow: var(--shadow-main);

	transform: rotate(-3deg);
}


/* Piktogramm */

.prozess-icon {
	width: 76px;
	height: 76px;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 8px;
}

.prozess-icon img {
	max-width: 100%;
	max-height: 100%;

	width: auto;
	height: auto;
}


/* Inhaltsbox */

.prozess-box {
	width: 100% !important;
}


/* Pfeilartige Andeutung */

.prozess-schritt:not(:last-child)::after {
	content: "";

	position: absolute;

	left: 57px; /*51*/
	bottom: -1.5rem;

	width: 10px;
	height: 10px;

	border-right: 3px solid var(--sand);
	border-bottom: 3px solid var(--sand);

	transform: rotate(45deg);

	opacity: 0.85;

	z-index: 2;
	
	box-shadow: var(--shadow-main);
}

.prozess-schritt:last-child::after {
	content: "";

	position: absolute;

	left: 53px;
	bottom: 0.5rem;

	width: 19px;
	height: 3px;


	border-bottom: 3px solid var(--sand);

	opacity: 0.85;

	z-index: 2;
	
	box-shadow: var(--shadow-main);
}


@media (max-width: 700px) {

	.prozess {
		gap: 1.5rem;
	}

	.prozess::before {
		left: 38px; /*34*/
		top: 42px;
		bottom: 42px;
	}

	.prozess-schritt {
		grid-template-columns: 80px minmax(0, 1fr);
		gap: 1.2rem;
	}

	.prozess-nummer {
		width: 44px;
		height: 44px;

		font-size: 1.5rem;
	}

	.prozess-icon {
		width: 60px;
		height: 60px;
	}

	.prozess-schritt:not(:last-child)::after {
		left: 33px;
	}
	
	.prozess-schritt:last-child::after {
		left: 29px;
		bottom: 2.5rem;
	}
}


@media (max-width: 500px) {

	.prozess-schritt {
		grid-template-columns: 65px minmax(0, 1fr);
		gap: 0.8rem;
	}

	.prozess::before {
		left: 31px;
	}

	.prozess-nummer {
		width: 40px;
		height: 40px;
		font-size: 1.35rem;
	}

	.prozess-icon {
		width: 52px;
		height: 52px;
		padding: 5px;
	}

	.prozess-box {
		padding: 1.5rem;
	}

	.prozess-schritt:not(:last-child)::after {
		left: 26px;
	}
	
	.prozess-schritt:last-child::after {
		left: 23px;
		bottom: 2.5rem;
	}
}



/* =========================================================
   INFOBOXEN
   ========================================================= */

.info-demo {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}


.info-box {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr);
	gap: 1.2rem;

	padding: 1.4rem 1.6rem;

	border-radius: var(--radius-box);

	box-shadow: var(--shadow-main);

	color: var(--anthrazit);
}


/* Icon */

.info-box-icon {
	display: flex;
	align-items: flex-start;
	justify-content: center;

	padding-top: 0.15rem;

	font-size: 2.2rem;
	line-height: 1;
}


.info-box-content h3 {
	margin: 0 0 0.35rem;

	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-weight: 300;

	font-size: 1.8rem;
	line-height: 1.15;
}


.info-box-content p {
	margin: 0;
}


.info-box-content p + p {
	margin-top: 0.9rem;
}


/* Sand */

.info-box-sand {
	background: var(--sand);
	color: var(--anthrazit);
}

.info-box-sand a {
	color: var(--gruen-hell);
}

.info-box-sand a:hover,
.info-box-sand a:focus,
.info-box-sand a:active {
	color: var(--gruen-dunkel);
}


/* Anthrazit */

.info-box-dark {
	background: var(--anthrazit);
	color: var(--eierschale);
}

.info-box-dark a {
	color: var(--sand);
}

.info-box-dark a:hover,
.info-box-dark a:focus,
.info-box-dark a:active {
	color: var(--eierschale);
}


/* Warnung */

.info-box-warning {
	background: #d69a4a;
	color: #28231c;
}

.info-box-warning a {
	color: var(--gruen-hell);
}

.info-box-warning a:hover,
.info-box-warning a:focus,
.info-box-warning a:active {
	color: var(--gruen-dunkel);
}

/* Fehler */

.info-box-error {
	background: #a94b4b;
	color: var(--eierschale);
}

.info-box-error a {
	color: var(--sand);
}

.info-box-error a:hover,
.info-box-error a:focus,
.info-box-error a:active {
	color: var(--eierschale);
}

/* Erfolg */

.info-box-success {
	background: #477b5c;
	color: var(--eierschale);
}

.info-box-success a {
	color: var(--sand);
}

.info-box-success a:hover,
.info-box-success a:focus,
.info-box-success a:active {
	color: var(--eierschale);
}

@media (max-width: 550px) {

	.info-box {
		grid-template-columns: 42px minmax(0, 1fr);

		gap: 0.9rem;

		padding: 1.2rem;
	}

	.info-box-icon {
		font-size: 1.8rem;
	}

	.info-box-content h3 {
		font-size: 1.6rem;
	}
}





/* =========================================================
   FORMULAR-SYSTEM
   ========================================================= */

.equilyric-form {
	width: 100%;
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.form-grid {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	column-gap: 1.5rem;
	row-gap: 1.4rem;
}


.form-field {
	min-width: 0;
}


.form-field-full {
	grid-column: 1 / -1;
}


.form-field-half {
	grid-column: span 1;
}


/* ---------------------------------------------------------
   LABELS
   --------------------------------------------------------- */

.form-field > label:not(.form-choice),
.form-field > legend {

	display: block;

	margin: 0 0 0.45rem;

	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-weight: 300;

	font-size: 1.45rem;
	line-height: 1.15;

	color: inherit;
}


.form-field > legend {
	padding: 0 5px 0 5px; /*nur für Label von Option-Areas (oben, rechts, unten, links); zuvor: 0; */
}


/* ---------------------------------------------------------
   FELDER
   --------------------------------------------------------- */

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="tel"],
.form-field input[type="url"],
.form-field input[type="number"],
.form-field input[type="date"],
.form-field select,
.form-field textarea {

	width: 100%;

	border: 1.5px solid rgba(255,248,220,0.55);
	border-radius: 8px;

	background: rgba(255,248,220,0.94);
	color: var(--anthrazit);

	padding:
		0.75rem
		0.9rem;

	font-family: 'Open Sans', sans-serif;
	font-size: 1rem;
	font-weight: 300;

	line-height: 1.4;

	outline: none;

	transition:
		border-color var(--transition-fast),
		box-shadow var(--transition-fast),
		background var(--transition-fast);
}


/* Textarea */

.form-field textarea {
	resize: vertical;
	min-height: 130px;
}


/* Focus */

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {

	border-color: var(--sand);

	box-shadow:
		0 0 0 2px rgba(198,156,109,0.55);
}


/* Fehler */

.form-field input.error,
.form-field select.error,
.form-field textarea.error {

	border-color: #D7312D !important; /*b94b4b*/

	/*box-shadow:
		0 0 0 3px rgba(185,75,75,0.18);*/
}


/* ---------------------------------------------------------
   HELP-TEXT
   --------------------------------------------------------- */

.form-help {

	margin-top: 0.4rem;

	font-size: 0.82rem;
	line-height: 1.45;

	opacity: 0.75;
}


.form-error {

	margin-top: 0.4rem;

	font-size: 0.82rem;
	line-height: 1.4;
	
	font-weight: 600;

	color: #D7312D; /*#e5a0a0*/
}


/* ---------------------------------------------------------
   FILE INPUT
   --------------------------------------------------------- */

.form-field input[type="file"] {

	width: 100%;

	padding: 0.45rem;

	border:
		1.5px dashed rgba(255,248,220,0.55);

	border-radius: 8px;

	color: var(--eierschale);

	font-family: 'Open Sans', sans-serif;
	font-size: 0.9rem;
}


.form-field input[type="file"]::file-selector-button {

	margin-right: 0.8rem;

	padding: 0.55rem 0.9rem;

	border: 0;
	border-radius: 6px;

	background: var(--anthrazit);
	color: var(--eierschale);

	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-size: 1rem;

	cursor: pointer;
}


.form-field input[type="file"]::file-selector-button:hover {
	background: var(--anthrazit-dunkel);
}


/* ---------------------------------------------------------
   RADIO / CHECKBOX
   --------------------------------------------------------- */

.form-field fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

fieldset.form-field {
	border: 1px solid var(--eierschale);
	border-radius: 8px;

	margin: 0;
	/*padding: 1rem 1.2rem;*/

	min-width: 0;
}

.form-choice {

	display: flex !important;
	align-items: flex-start;

	gap: 0.75rem;

	cursor: pointer;

	margin: 0 0 0.7rem !important;
}


.form-choice input {

	position: absolute;

	opacity: 0;

	pointer-events: none;
}


/* eigener Kontrollbereich */

.form-choice-control {

	flex: 0 0 auto;

	width: 21px;
	height: 21px;

	margin-top: 0.1rem;

	border:
		1.5px solid
		rgba(255,248,220,0.7);

	background: rgba(255,248,220,0.94);

	border-radius: 5px;

	position: relative;

	transition:
		background var(--transition-fast),
		border-color var(--transition-fast);
}


/* Radio rund */

input[type="radio"] + .form-choice-control {
	border-radius: 50%;
}


/* Checked */

.form-choice input:checked + .form-choice-control {

	background: var(--anthrazit);
	border-color: var(--anthrazit);
}


/* Haken */

.form-choice input[type="checkbox"]:checked
+ .form-choice-control::after {

	content: "\f00c";

	font-family: FontAwesome;

	position: absolute;

	left: 50%;
	top: 50%;

	transform:
		translate(-50%, -50%);

	color: var(--eierschale);

	font-size: 0.8rem;
}


/* Radio-Punkt */

.form-choice input[type="radio"]:checked
+ .form-choice-control::after {

	content: "\f00d";
	font-family: FontAwesome;
	font-size: 0.8rem;

	position: absolute;

	left: 24%;
	top: -11%;

	width: 0;
	height: 0;

	transform:
		translate(-50%, -50%);

	/*border-radius: 50%;*/

	background: var(--eierschale);
}


.form-choice-label {

	flex: 1;

	font-family: 'Open Sans', sans-serif;
	font-size: 1rem;
	font-weight: 300;

	line-height: 1.45;
}


/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

.form-actions {

	display: flex;

	align-items: center;

	gap: 1rem;

	flex-wrap: wrap;

	padding-top: 0.5rem;
}


.form-button {

	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap: 0.55rem;

	padding:
		0.75rem 1.35rem;

	border:
		1.5px solid var(--sand);

	border-radius: var(--radius-button);

	background: var(--anthrazit);

	color: var(--eierschale);

	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-size: 1.25rem;
	font-weight: 300;

	cursor: pointer;

	box-shadow: var(--shadow-main);

	transition:
		background var(--transition-fast),
		border-color var(--transition-fast),
		transform var(--transition-fast);
}


.form-button:hover,
.form-button:focus {

	background: var(--anthrazit-dunkel);

	border-color: var(--eierschale);

	transform: translateY(-1px);
}


.form-button-primary {

	background: var(--anthrazit);
}


.form-button-secondary {

	background: transparent;

	border-color:
		rgba(255,248,220,0.6);
}


.form-button:disabled {

	opacity: 0.4;

	cursor: not-allowed;

	box-shadow: none;

	transform: none;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 700px) {

	.form-grid {
		grid-template-columns: 1fr;
	}

	.form-field-half,
	.form-field-full {
		grid-column: 1 / -1;
	}

	.form-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.form-button {
		width: 100%;
	}
}


/* ---
	FORM AUF GRÜN 
	---- */
	
	.form-on-green {
		padding: 0;
	}
	

/* =========================================================
   FORMULAR IN SAND-BOX
   ========================================================= */

.form-on-sand {

	font-size: 0.92rem;
}


.form-on-sand
.form-field > label:not(.form-choice),
.form-on-sand
.form-field > legend {

	font-size: 1.25rem;
}


.form-on-sand
.form-field input[type="text"],
.form-on-sand
.form-field input[type="email"],
.form-on-sand
.form-field input[type="password"],
.form-on-sand
.form-field input[type="tel"],
.form-on-sand
.form-field input[type="url"],
.form-on-sand
.form-field input[type="number"],
.form-on-sand
.form-field input[type="date"],
.form-on-sand
.form-field select,
.form-on-sand
.form-field textarea {

	padding: 0.6rem 0.75rem;

	border-radius: 5px;

	background: rgba(255,248,220,0.92);

	border-color:
		rgba(34,38,41,0.35);
}


.form-on-sand
.form-choice-control {

	width: 19px;
	height: 19px;

	border-color:
		rgba(34,38,41,0.45);
}


.form-on-sand
.form-choice input:checked
+ .form-choice-control {

	background: var(--gruen-dunkel);
	border-color: var(--gruen-dunkel);
}

.form-on-sand
.form-choice input[type="radio"]:checked
+ .form-choice-control::after {

	left: 19%;
	top: -21%;
	
	color: var(--eierschale);

}

.form-on-sand .form-field input[type="file"] {
	border:
		1.5px dashed rgba(34,38,41,0.66);
}

.form-on-sand .form-button {
	box-shadow: none;
}

.form-on-sand .form-button-primary {
	border-color: rgb(242,227,194,0.9);
}

.form-on-sand .form-button-primary:hover {
	border-color: var(--eierschale);
}

.form-on-sand
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {

	border-color: rgba(0,53,55,0.55) !important;

	box-shadow:
		0 0 0 2px rgba(0,53,55,0.33) !important;
}

.form-on-sand .form-field textarea:focus { /*hier nochmal extra, da im Firefox (153) sonst keine Anwendung */

	border-color: rgba(0,53,55,0.55) !important;

	box-shadow:
		0 0 0 2px rgba(0,53,55,0.33) !important;
}

.form-on-sand .form-field select:focus { /*hier nochmal extra, da im Firefox (153) sonst keine Anwendung */

	border-color: rgba(0,53,55,0.55) !important;

	box-shadow:
		0 0 0 2px rgba(0,53,55,0.33) !important;
}

.form-on-sand fieldset.form-field {
	border: 1px solid var(--anthrazit);
	border-radius: 5px;
}

/* =========================================================
   FORMULAR IN ANTHRAZIT-BOX
   ========================================================= */

.form-on-dark {

	font-size: 0.92rem;
}


.form-on-dark
.form-field > label:not(.form-choice),
.form-on-dark
.form-field > legend {

	font-size: 1.25rem;
}


.form-on-dark
.form-field input[type="text"],
.form-on-dark
.form-field input[type="email"],
.form-on-dark
.form-field input[type="password"],
.form-on-dark
.form-field input[type="tel"],
.form-on-dark
.form-field input[type="url"],
.form-on-dark
.form-field input[type="number"],
.form-on-dark
.form-field input[type="date"],
.form-on-dark
.form-field select,
.form-on-dark
.form-field textarea {

	padding: 0.6rem 0.75rem;

	border-radius: 5px;

	background: rgba(255,248,220,0.95);

	border-color:
		rgba(255,248,220,0.35);
}


.form-on-dark
.form-choice-control {

	width: 19px;
	height: 19px;
}


.form-on-dark
.form-choice input:checked
+ .form-choice-control {

	background: var(--sand);
	border-color: var(--sand);
}

.form-on-dark
.form-choice input[type="radio"]:checked
+ .form-choice-control::after {

	left: 19%;
	top: -21%;
	
}

.form-on-dark .form-button {
	box-shadow: none;
	background: var(--anthrazit-dunkel);
}

.form-on-dark
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {

	border-color: var(--sand) !important;

	box-shadow:
		0 0 0 2px rgba(198,156,109,0.55) !important;
}

.form-on-dark fieldset.form-field {
	border-radius: 5px;
}



/* =========================================================
   STATUS-SEITE
   Projektinformation + Fortschrittsindikator
   ========================================================= */


/* ---------------------------------------------------------
   STATUS-BEREICH
   --------------------------------------------------------- */

.status-section {
	width: 100%;
}


/* ---------------------------------------------------------
   PROJEKT-INFORMATION
   --------------------------------------------------------- */

.status-project {

	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 2rem;

	width: 100%;

	margin-bottom: 3rem;

	color: var(--eierschale);
	
	text-shadow: var(--shadow-main);
}


/* Linke Seite */

.status-project-main {

	display: flex;

	align-items: center;

	gap: 1rem;

	min-width: 0;
}


/* Pferdekopf */

.status-project-icon {

	flex: 0 0 auto;

	width: 52px;
	height: 52px;

	display: flex;

	align-items: center;
	justify-content: center;

	color: var(--eierschale);
}


.status-project-icon svg {

	display: block;

	width: 100%;
	height: 100%;
}


/* Name + Metadaten */

.status-project-details {

	display: flex;

	align-items: baseline;

	flex-wrap: wrap;

	column-gap: 0.55rem;

	min-width: 0;
}


.status-project-name {

	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-weight: 300;

	font-size: 2rem;
	line-height: 1.1;

	white-space: normal;
}


.status-project-meta {

	font-family: 'Open Sans', sans-serif;
	font-weight: 300;

	font-size: 0.9rem;
	line-height: 1.4;

	opacity: 0.9;
}


/* Produktionsnummer */

.status-project-number {

	flex: 0 0 auto;

	display: flex;

	align-items: baseline;

	gap: 0.45rem;

	text-align: right;
}


.status-project-number > span {

	font-family: 'Open Sans', sans-serif;
	font-weight: 300;

	font-size: 0.9rem;

	white-space: nowrap;

	opacity: 0.9;
}


.status-project-number > strong {

	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-weight: 300;

	font-size: 2rem;
	line-height: 1.1;

	white-space: nowrap;
}


/* ---------------------------------------------------------
   FORTSCHRITT
   --------------------------------------------------------- */

.status-progress {

	width: 100%;

	/* sorgt für ausreichend Platz für die Beschriftungen */
	padding: 1rem 0 0.5rem;
}


.status-progress-list {

	display: flex;

	align-items: flex-start;

	list-style: none;

	margin: 0;
	padding: 0;
}


/* ---------------------------------------------------------
   EINZELNER SCHRITT
   --------------------------------------------------------- */

.status-step {

	position: relative;

	flex: 1 1 0;

	min-width: 0;

	display: flex;

	flex-direction: column;

	align-items: center;

	text-align: center;
}


/*
 * Die Verbindungslinie liegt jeweils zwischen zwei
 * Punkten und niemals unter einem Punkt.
 */

.status-step:not(:last-child)::after {

	content: "";

	position: absolute;

	top: 18px;

	left: calc(50% + 18px);
	right: calc(-50% + 18px);

	height: 4px;

	background: var(--sand);

	z-index: 1;
	
	box-shadow: var(--shadow-main);
}


/* ---------------------------------------------------------
   MARKER / KREIS
   --------------------------------------------------------- */

.status-step-marker {

	position: relative;

	z-index: 2;

	width: 36px;
	height: 36px;

	flex: 0 0 36px;

	border: 3px solid var(--sand);

	border-radius: 50%;

	background: var(--gruen-dunkel);

	box-sizing: border-box;

	display: flex;

	align-items: center;
	justify-content: center;
	
	box-shadow: var(--shadow-main);
}


/* ---------------------------------------------------------
   CHECK
   --------------------------------------------------------- */

.status-step-check {

	display: none;

	position: absolute;

	left: 50%;
	top: 50%;

	transform:
		translate(-50%, -50%);

	color: var(--sand);

	font-size: 1.5rem;

	line-height: 1;

	/*
	 * Hintergrund in Grün, damit die Kreislinie an
	 * der Stelle des Hakens optisch geöffnet wird.
	 */
	padding: 0 4px;
}


/* Erledigter Schritt */

.status-step.done .status-step-check {

	display: block;

	/*
	 * Der Haken darf etwas nach oben über den Kreis
	 * hinauswachsen.
	 */
	top: 49%;

	transform:
		translate(-50%, -50%)
		rotate(-4deg);

	font-size: 1.55rem;
}


/*
 * Der Marker bekommt bei "done" eine kleine optische
 * Öffnung für den Haken.
 */

.status-step.done .status-step-marker {

	border-color: var(--sand);
}


/* ---------------------------------------------------------
   BESCHRIFTUNG
   --------------------------------------------------------- */

.status-step-label {

	width: 100%;

	max-width: 150px;

	margin-top: 0.8rem;

	color: var(--sand);

	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-weight: 300;

	font-size: 1.25rem;
	line-height: 1.15;

	text-align: center;
	
	text-shadow: var(--shadow-main);
}


/* ---------------------------------------------------------
   RESPONSIVE – TABLET
   --------------------------------------------------------- */

@media (max-width: 800px) {

	.status-project {

		gap: 1.2rem;

		margin-bottom: 2.5rem;
	}


	.status-project-name,
	.status-project-number > strong {

		font-size: 1.75rem;
	}


	.status-project-icon {

		width: 46px;
		height: 46px;
	}


	.status-step-label {

		font-size: 1.15rem;

		max-width: 125px;
	}

}


/* ---------------------------------------------------------
   RESPONSIVE – MOBILE
   --------------------------------------------------------- */

@media (max-width: 620px) {

	/* ---------------------------------------------
	   Projektinfo wird zweizeilig
	   --------------------------------------------- */

	.status-project {

		align-items: flex-start;

		margin-bottom: 2rem;
	}


	.status-project-main {

		align-items: flex-start;

		flex: 1 1 auto;

		min-width: 0;
	}


	.status-project-details {

		display: block;
	}


	.status-project-name {

		font-size: 1.7rem;

		line-height: 1.05;
	}


	.status-project-meta {

		margin-top: 0.15rem;
	}


	.status-project-number {

		align-self: flex-start;

		display: block;

		text-align: right;
	}


	.status-project-number > span,
	.status-project-number > strong {

		display: block;
	}


	.status-project-number > strong {

		font-size: 1.7rem;
	}


	/* ---------------------------------------------
	   Vertikaler Fortschritt
	   --------------------------------------------- */

	.status-progress {

		padding: 0.5rem 0;
	}


	.status-progress-list {

		display: flex;

		flex-direction: column;

		align-items: stretch;
	}


	.status-step {

		flex: none;

		display: grid;

		grid-template-columns: 52px minmax(0, 1fr);

		column-gap: 1rem;

		align-items: center;

		text-align: left;

		min-height: 53px;  /*72*/
	}


	/* Vertikale Verbindungslinie */

	.status-step:not(:last-child)::after {

		top: 38px; /*54*/
		bottom: -18px;

		left: 24px;

		right: auto;

		width: 4px;
		height: auto;

		background: var(--sand);
	}


	/* Marker */

	.status-step-marker {

		grid-column: 1;

		grid-row: 1;

		width: 36px;
		height: 36px;

		justify-self: center;
	}


	/* Beschriftung rechts */

	.status-step-label {

		grid-column: 2;
		grid-row: 1;

		width: auto;

		max-width: none;

		margin: 0;

		text-align: left;

		font-size: 1.3rem;

		line-height: 1.15;
	}

}


/* ---------------------------------------------------------
   SEHR SCHMALE GERÄTE
   --------------------------------------------------------- */

@media (max-width: 400px) {

	.status-project {

		gap: 0.75rem;
	}


	.status-project-icon {

		width: 40px;
		height: 40px;
	}


	.status-project-name {

		font-size: 1.55rem;
	}


	.status-project-meta,
	.status-project-number > span {

		font-size: 0.8rem;
	}


	.status-project-number > strong {

		font-size: 1.55rem;
	}


	.status-step {

		grid-template-columns: 46px minmax(0, 1fr);

		column-gap: 0.8rem;
	}


	.status-step:not(:last-child)::after {

		left: 21px;
	}


	.status-step-label {

		font-size: 1.2rem;
	}

}