:root {
	--contact-title-color: linear-gradient(90deg, #05ffff, #2b2828);
	--contact-background: #eaedf3;
	--contact-color: #0c9d9d;
	--qa-color: #038181;
	--qa-svg: #1ea174;
}

[data-theme="dark"] {
	--contact-background: #1a1d25;
	--contact-title-color: linear-gradient(90deg, #0ff, #9f7aea);
	--contact-color: #8ac9f9;
	--qa-color: #5db5f9;
	--qa-svg: #41b4ff;
}

.feedback-title {
	text-align: center;
	margin-bottom: 4rem;
}

.feedback-title h1 {
	font-size: calc(var(--font-size-larger) + 2.5rem);
	background: var(--contact-title-color);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	letter-spacing: 1px;
	margin-top: 0;
}

.flex-container {
	display: flex;
	gap: 2.5rem;
	margin: 0 2rem;
}

.feedback-wrapper {
	flex: 1;
	margin-bottom: 1rem;
}

.feedback-container {
	background: var(--contact-background);
	border-radius: 1rem;
	padding: 2rem;
	box-shadow: 0 0 15px rgba(0,255,255,0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feedback-container h2 {
	margin-bottom: 1.5rem;
	text-align: center;
	color: var(--contact-color);
}

.feedback-form .form-group {
	margin-bottom: 1.5rem;
	display: flex;
	flex-direction: column;
}

.feedback-form label {
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.feedback-form textarea,
.feedback-form input[type="text"],
.feedback-form input[type="email"],
.feedback-form select {
	padding: 0.7rem;
	font-size: calc(var(--font-size-larger) + 1rem);
	border-radius: 6px;
	border: 1px solid rgba(16, 245, 169, 0.7);
}

@font-face {
    font-family: 'Rubik';
    src: url('../lib/fonts/Rubik/Rubik-Light.woff2') format('woff2'),
        url('../lib/fonts/Rubik/Rubik-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

.feedback-form textarea {
	font-family: 'Rubik', sans-serif;
}

.feedback-form input[type="file"] {
	padding: 10px;
    background: #ddf4ff;
    border: 1px dashed #3df5bd;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.9);
}

.feedback-form input[type="file"]::file-selector-button {
  background: linear-gradient(to left, #5a7bff, #516de7);
  color: white;
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.feedback-form textarea:focus,
.feedback-form input:focus,
.feedback-form select:focus {
	outline: none;
	border-color: #007acc;
	background-color: #f0faff;
}

.checkbox-group {
	flex-direction: row;
	align-items: center;
}

.checkbox-group label,
.form-group label input {
	cursor: pointer;
}

.required {
	color: red;
	font-weight: bold;
}

.submit-button {
	background: linear-gradient(90deg, #00e6ff, #9f7aea);
	color: #fff;
	border: none;
	padding: 0.75rem 1.5rem;
	font-size: calc(1rem + var(--font-size-larger));
	border-radius: 6px;
	cursor: pointer;
	transition: transform 0.2s ease, background 0.2s ease;
	will-change: transform;
}

.submit-button:hover {
	transform: scale(1.05);
	box-shadow: 0 0 12px rgba(0,230,255,0.6);
}

.feedback-message {
  margin-top: 1rem;
  font-weight: bold;
  text-align: center;
}

/* === FEEDBACK QUESTIONS === */

.questions-wrapper {
	flex: 1;
	background: var(--contact-background);
	box-shadow: 0 0 15px rgba(0, 255, 255, 0.1);
	padding: 2rem;
	border-radius: 12px;
	margin-bottom: 2rem;
}

.questions-wrapper fieldset {
	border: none;
}

.questions-wrapper h1 {
	text-align: center;
	color: var(--qa-color);
	margin: 0;
	margin-bottom: 1.25rem;
}

.questions-wrapper h1 svg {
	height: 28px;
	width: 28px;
	fill: var(--qa-svg);
	align-self: center;
}

.fragebogen {
	display: flex;
	flex-direction: column;
}

.fragebogen.collapsed .question:nth-child(n+5) {
	display: none;
}

/* NEU: unteren Bereich auch verstecken */
.fragebogen.collapsed .extra-content {
	display: none;
}

.toggle-btn-wrapper {
	display: flex;
    justify-content: center;
}

.toggle-btn {
	margin-top: 15px;
	cursor: pointer;
	background: #223965;
    color: white;
	border: none;
	padding: 10px;
	border-radius: 5px;
}

.fragebogen p {
	text-align: center;
}

.question { 
	margin-bottom: 25px; 
}

/* Intro/Outro Texte */
.questions-wrapper .intro, 
.questions-wrapper .outro {
	margin-bottom: 20px;
	line-height: 1.5;
}

.intro-i {
	display: block;
	margin-bottom: 3rem;
}

.questions-wrapper .intro a {
	color: #007bff;
	text-decoration: none;
}

.questions-wrapper .intro a:hover {
	text-decoration: underline;
}

/* Fragen */
.question {
	margin-bottom: 1.75rem;
}

.question-label {
	font-size: calc(var(--font-size-larger) + 1.25rem);
	font-weight: bold;
	display: block;
	margin-bottom: 8px;
}

/* Textarea */
.text-input {
	font-family: arial;
	min-width: 100%;
	max-width: 500px;
	box-sizing: border-box;
	min-height: 80px;
	padding: 10px;
	border-radius: 6px;
	border: 1px solid #ccc;
	font-size: calc(var(--font-size-larger) + 1rem);
	resize: vertical;
}

.text-input:focus {
	outline: none;
	border-color: #007bff;
	box-shadow: 0 0 4px rgba(0,123,255,0.4);
}

/* Scale */
.scale {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0;
}

.scale-btn {
	padding: 8px 14px;
	border: 1px solid #aaa;
	border-radius: 6px;
	background: #f8f9fa;
	cursor: pointer;
	transition: 0.2s;
}

.scale-btn:hover {
	background: #c9c9c9;
}

.scale-btn.active {
	background: #007bff;
	border-color: #0056b3;
	color: #fff;
	font-weight: bold;
}

.scale-label {
	font-size: calc(var(--font-size-larger) + 1rem);
}

/* Radio/Checkbox Gruppen */
.radio-group, .checkbox-group {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.radio-option, .checkbox-option {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	font-size: calc(var(--font-size-larger) + 1rem);
}

.radio-option input, .checkbox-option input {
	accent-color: #007bff; /* moderne Browser */
	cursor: pointer;
}

/* Submit Button */
.submit-btn {
    display: block;
	justify-self: center;
	background: #2a5acd;
	margin-bottom: 1rem;
	color: white;
	border: none;
	padding: 12px 20px;
	border-radius: 8px;
	font-size: calc(var(--font-size-larger) + 1rem);
	cursor: pointer;
	transition: 0.2s;
}

.submit-btn:hover {
	background: #2046a1;
}

/* Feedback */
#feedback {
	margin: 20px 0;
	padding: 10px;
	display: none;
	border-radius: 5px;
}

#feedback.success { 
	background: #d4edda; 
	color: #155724; 
}

#feedback.error { 
	background: #f8d7da; 
	color: #721c24; 
}


/* DATENSCHUTZ */

.datenschutz {
	margin-top: -1rem;
	margin-bottom: 2rem;
	font-size: calc(0.9rem + var(--font-size-larger));
}

.datenschutz a {
	text-decoration: none;
	margin-bottom: 0.5rem;
	color: #0673bc;
	border-bottom: 1px solid #0673bc;
	transition: color 0.1s ease;
	font-weight: 500;
}

.datenschutz a:hover {
	border-bottom: none;
	color: #0898f8;
}

/* ============ INVITE ============== */
:root{
	--card: rgba(0,0,0,0.06);
	--accent1: #7c3aed; /* violett */
	--accent2: #06b6d4; /* cyan */
	--glass: rgba(0,0,0,0.04);
	--muted: rgba(0,0,0,0.65);
	--invite-footer-background: #d9d9d9;
	--invite-button-color: black;
	--invite-button-border-color: 1px solid rgba(0,0,0,0.06);
	--radius: 14px;
}

[data-theme="dark"] {
	--card: rgba(255,255,255,0.06);
	--accent1: #7c3aed; /* violett */
	--accent2: #06b6d4; /* cyan */
	--glass: rgba(255,255,255,0.04);
	--muted: rgba(255,255,255,0.65);
	--invite-footer-background: #0d101c;
	--invite-button-color: #fff;
	--invite-button-border-color: 1px solid rgba(255,255,255,0.06);
}

.wrap {
	padding: 4rem 2rem;
}

.under-hero {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	align-items: start;
}

.card {
	flex: 3;
	position: relative;
	background: linear-gradient(180deg,var(--card), rgba(255,255,255,0.02));
	border-radius: var(--radius);
	padding: 2rem;
	padding-top: 3.5rem;
	backdrop-filter: blur(6px);
	box-shadow: 0 10px 30px rgba(2,6,23,0.1);
}

.pill {
	position: absolute;
	top: 1rem;
	left: 2rem;
	display: inline-flex;
	gap: 10px;
	align-items: center;
	padding: 6px 10px;
	border-radius: 999px;
	background: linear-gradient(90deg,var(--accent1),var(--accent2));
	font-weight: 600;
	font-size: 13px;
}

.side {
	position:relative;
	flex: 1;
}

.under-hero .headline {
	font-size:28px;
	line-height:1.05;
	margin:0 0 10px;
}

.under-hero .sub {
	color:var(--muted);
	margin:0 0 20px;
	font-size:14px;
}

.values {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 18px 0;
}

.value {
	display: block;
	padding: 12px;
	border-radius: 10px;
	background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
	border: 1px solid rgba(255,255,255,0.03);
}

.value h4 {
	margin: 0;
	font-size: 15px;
}

.value p {
	margin: 6px 0 0;
	color: var(--muted);
	font-size: 13px;
}

    .actions{display:flex;gap:10px;margin-top:18px}
    .btn{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;font-weight:600;border:0;cursor:pointer}
.btn-ghost {
	background: transparent;
	color: var(--invite-button-color);
	border: var(--invite-button-border-color);
}
    .btn-primary{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#071022}

    .mission{padding:18px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);border:1px solid rgba(255,255,255,0.03)}
    .mission h3{margin:0 0 6px;font-size:16px}
    .mission p{margin:0;color:var(--muted);font-size:14px}

    .cta-box{margin-top:16px;padding:12px;border-radius:12px;background:linear-gradient(180deg, rgba(7,18,34,0.7), rgba(7,18,34,0.45));border:1px solid rgba(255,255,255,0.03)}
    .small{font-size:13px;color:var(--muted)}

    .invite-text{white-space:pre-wrap;font-family:inherit;font-size:13px;background:linear-gradient(180deg, rgba(255,255,255,0.015), transparent);padding:12px;border-radius:8px;margin-top:12px;border:1px dashed rgba(255,255,255,0.03);}

    /* modal */
    .modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:linear-gradient(0deg,rgba(2,6,23,0.6),rgba(2,6,23,0.6));}
    .modal.open{display:flex}
    .modal-card{width:100%;max-width:680px;background:var(--glass);padding:20px;border-radius:12px;border:1px solid rgba(255,255,255,0.04)}
    .form-row{display:flex;gap:10px;margin-top:10px}
    .input,.textarea{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:#fff}
    .textarea{min-height:120px;resize:vertical}

.wrap footer {
	margin-top:24px;
	color:var(--muted);
	font-size:13px;
	text-align:center;
	background: var(--invite-footer-background);
}

    /* subtle entrance */
    .card, .mission{transform:translateY(6px);opacity:0;animation:rise .6s ease forwards}
    .mission{animation-delay:.06s}
    @keyframes rise{to{transform:none;opacity:1}}


/* === MEDIA === */

@media (max-width: 900px) {
	.flex-container {
		flex-direction: column;
	}
}

@media (max-width: 425px) {
	.feedback-container {
		margin-bottom: 0 !important;
	}
	.flex-container {
		margin: 0 !important;
		gap: 0 !important;
	}
	.wrap {
		padding: 4rem 0;
	}
}