/* Recruiting Start */

/* Basis-Animation für die Funnel-Elemente zuweisen */
div.recruiting-wrapper > :nth-child(1),
div.recruiting-wrapper > :nth-child(2),
div.recruiting-wrapper > :nth-child(3),
div.recruiting-wrapper > :nth-child(4),
div.recruiting-wrapper > :nth-child(5),
div.recruiting-wrapper > :nth-child(6),
div.recruiting-wrapper > :nth-child(7),
div.recruiting-wrapper .flexbox > .quiz-50,
div.recruiting-wrapper .flexbox > .quiz-50-bild {
    --delay-step: 150ms;
    animation: start-fade 1300ms ease-in-out;
    animation-delay: calc(var(--n) * var(--delay-step));
    animation-fill-mode: forwards;
    opacity: 0;
}

/* 1. Element (Logo) */
div.recruiting-wrapper > :nth-child(1) {
    --n: 0;
}

/* 2. Element (z. B. "Frage 1 von 3") */
div.recruiting-wrapper > :nth-child(2) {
    --n: 1;
}

/* 3. Element (z. B. Die Frage als h2) */
div.recruiting-wrapper > :nth-child(3) {
    --n: 2;
}

/* 4. Element (Falls vorhanden und kein Container) */
div.recruiting-wrapper > :nth-child(4) {
    --n: 3;
}

/* 5. Element: Erste Antwortmöglichkeit */
div.recruiting-wrapper .flexbox > :nth-child(1), div.recruiting-wrapper > :nth-child(5) {
    --n: 4;
}

/* 6. Element: Zweite Antwortmöglichkeit */
div.recruiting-wrapper .flexbox > :nth-child(2), div.recruiting-wrapper > :nth-child(6) {
    --n: 5;
}

/* 7. Element: Dritte Antwortmöglichkeit */
div.recruiting-wrapper .flexbox > :nth-child(3), div.recruiting-wrapper > :nth-child(7) {
    --n: 6;
}

/* 8. Element: Vierte Antwortmöglichkeit */
div.recruiting-wrapper .flexbox > :nth-child(4) {
    --n: 7;
}




div.recruiting-content
{
	padding:20px 0;
	text-align:center;
    min-height:calc(100vh - 1px);
}

div.recruiting-content div.flexbox
{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap; 
	flex-direction:row;
}

div.recruiting-wrapper
{
	margin:0 auto;
	padding:0 20px;
	width:100%;
	max-width:650px;
	box-sizing:border-box;
}

div.recruiting-extrawidth
{
	max-width:700px;
}

div.recruiting-content div.devider
{
	width:90%;
	margin:30px auto 50px auto;
	height:1px;
	background:#ccc;
}

div.recruiting-content h2
{
	display: block;
	font-size:26px;
	color:#343435;
	margin:25px 0;
	text-align: center;
	font-weight:700;
	line-height:1.25;
}

div.recruiting-content h2::before, div.recruiting-content h3::before
{
	display: none;
}

div.recruiting-content h3
{
	display: block;
	font-size:19px;
	color:#343435;
	margin:25px 0;
	font-weight:700;
	line-height:1.5;
	text-align:center;
	text-transform:none;
}

div.recruiting-content h4
{
	font-size:16px;
	color:#343435;
	margin:20px 0;
	font-weight:300;
	font-family:'Muli';
	line-height:1.5;
}

button.quiz-50, button.quiz-50-bild, a.quiz-50
{
	width:calc(50% - 8px);
	margin:8px 0;
	background: var(--akzentfarbe);
	color:#fff;
	font-size:16px;
	text-align:center;
	border-radius:10px;
	border:0;
	padding:0;
	box-shadow:0 1px 2px rgba(0,0,0,.2);
	cursor:pointer;
}

button.quiz-50
{
	padding:15px;
}

button.quiz-50-bild img, a.quiz-50 img
{
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	vertical-align: bottom;
}

button.quiz-50-bild p, a.quiz-50 p
{
	padding:0 10px;
}

a.recruiting-button, input.recruiting-btn
{
	width:calc(100% - 40px);
	padding:0 20px;
	background: var(--akzentfarbe);
	color:#fff;
	border-radius:6px;
	white-space: normal;
	cursor:pointer;
	-webkit-appearance:none;
	border:0;
}

input.recruiting-btn
{
	width:100%;
	padding:20px 20px;
	font-size:20px;
}

div.recruiting-flexelement-50
{
	width:calc(50% - 15px);
	display:flex;
	margin:20px 0;
}

div.list-icon
{
	font-size:32px;
	text-align:left;
}

div.list-text
{
	padding-left:30px;
	text-align:left;
	color:#343435;
}

div.recruiting-content textarea
{
	font-family:inherit;
	-webkit-appearance: none;
	font-size:inherit;
}

div.recruiting-content textarea.input
{
	max-width:calc(100% - 56px);
	min-width:calc(100% - 56px);
	min-height:25px;
	max-height:200px;
	height:100px;
	box-shadow:0 1px 2px rgba(0,0,0,.2);
}

div.recruiting-content .form-items
{
	position:relative;
}

.form
{
	display: flex;
	gap: 0.5rem;
	flex-direction: column;
}

.recruiting-wrapper .form-items .input
{
	background: #f8f8f8;
}

button.blau
{
	background:linear-gradient(30deg,#007AFF,#248DFF);
}

button.rot
{
	background:linear-gradient(30deg,#FF2B1F,#ff3b30);
}

button.gelb
{
	background:linear-gradient(30deg,#ECBD00,#ffc000);
}

button.grün
{
	background:linear-gradient(30deg,#34BC54,#3FD161);
}

button.gelb, button.grün, button.rot, button.blau
{
	color:#fff;
	text-shadow:1px 1px 3px rgba(0,0,0,0.2);
}

.fade-in
{
	animation:fade-in-element 600ms ease-out;
}

@keyframes fade-in-element{
	0%
	{
		opacity:0;
		transform:translatey(20px);
	}
	20%
	{
		opacity:0.1;
	}
	100%
	{
		opacity:1;
		transform:translatey(0);
	}
}

img.bild-gross, img.ansprechpartner
{
	width:100%;
	max-width:440px;
	margin-top:30px;
	border-radius:8px;
	box-shadow:0 1px 2px rgba(0,0,0,.2);
}

img.ansprechpartner
{
	width:80%;
	max-width:360px;
}

div.circle
{
	background:#fff;
	width:100px;
	height:100px;
	padding: 20px;
	border-radius:70px;
	margin:40px auto;
	color:#34BC54;
	line-height:100px;
	box-shadow:0 1px 2px rgba(0,0,0,.2);
	text-shadow:0 1px 2px rgba(0,0,0,.2);
}

div.recruiting-team
{
	width:25%;
	box-sizing:border-box;
	padding:0 10px;
	text-align:center;
}

div.recruiting-team img
{
	width:100%;
	height:75%;
	border-radius:50%;
	box-shadow:0 4px 6px rgb(0 0 0 / 15%);
	object-fit:cover;
    object-position:top center;
}

div.flexelement-testimonial.personal::after
{
	top: unset !important;
	bottom: 3rem;
}

div.personal div.flexbox-center
{
	justify-content: flex-start;
	margin-top: 2rem;
}

/* ========== QUIZ TILE FIX ========== */

/* Eltern-Container: gleiche Höhe für beide Kacheln pro Zeile */
div.recruiting-content div.flexbox {
  align-items: stretch; /* statt baseline */
}

/* Kacheln als Cards aufbauen */
button.quiz-50-bild,
a.quiz-50 {
  display: flex;               /* vertikale Card */
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;            /* nichts "guckt" oben durch */
}

/* Bild immer bündig, ohne Baseline-Lücke */
button.quiz-50-bild img,
a.quiz-50 img {
  display: block;         /* entfernt Baseline-Gap */
  width: 100%;
  height: auto;
  margin: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/* Textbereich gleich hoch halten, zentrieren */
button.quiz-50-bild p,
a.quiz-50 p {
  margin: 0;
  padding: 20px 12px;
  min-height: 3.2em;      /* ~2 Zeilen bei ~16px */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Farbige Button-Variante (ohne Bild) bleibt Card, zentriert Text */
button.quiz-50 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;       /* einheitliche Höhe */
  padding: 15px;
}

/* Optional: einheitliche Kachelhöhen pro Zeile (der sauberste Weg: Grid) */
@media (min-width: 600px) {
  /* Wenn du magst, kannst du die Flex-Zeile hier zu Grid machen: */
  /* .recruiting-content .flexbox { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } */
}



@media screen and (max-width:900px)
{
	div.recruiting-flexelement-50{width:100%;}
	div.recruiting-content h2{font-size:22px;margin:15px 0;}
	img.recruiting-logo{height:45px;}
	div.recruiting-team{width:50%;}
}