/* =====================================================
   GreenScout Funnel Form - Styles
   Übernimmt das Design des bestehenden Flächenrechners
   ===================================================== */

.gsff-funnel {
	--gsff-primary:    #2d473e;
	--gsff-accent:     #b2d082;
	--gsff-hover:      #6a8f4e;
	--gsff-section-bg: #7d9c5d;
	--gsff-light-bg:   #f4f8f2;
	--gsff-text:       #1c1c1c;
	--gsff-muted:      #5a6660;
	--gsff-error:      #cc3366;
	--gsff-radius-lg:  18px;
	--gsff-radius-md:  16px;
	--gsff-radius-sm:  10px;
	--gsff-radius-pill:999px;
	--gsff-shadow:     0 8px 40px rgba(0,0,0,0.06);
	--gsff-shadow-lg:  0 12px 48px rgba(0,0,0,0.10);

	font-family: 'Gabarito', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
	color: var(--gsff-text);
	line-height: 1.5;
	max-width: 1100px;
	margin: 0 auto;
	box-sizing: border-box;
}
.gsff-funnel *,
.gsff-funnel *::before,
.gsff-funnel *::after { box-sizing: border-box; }

/* ----- Steps ----- */
.gsff-step { display: none; }
.gsff-step.is-active { display: block; }

/* ----- Cards ----- */
.gsff-card {
	background: #ffffff;
	border-radius: var(--gsff-radius-lg);
	box-shadow: var(--gsff-shadow);
	padding: 32px;
	max-width: 720px;
	margin: 0 auto;
}
.gsff-card--rechner   { max-width: 720px; }
.gsff-card--result    { max-width: 760px; }
.gsff-card--contact   {
	max-width: 920px;
	background: var(--gsff-section-bg);
	color: #fff;
	box-shadow: var(--gsff-shadow-lg);
	padding: 40px;
}
.gsff-card--thanks {
	text-align: center;
	max-width: 620px;
	padding: 48px 32px;
}

/* ----- Typography ----- */
.gsff-title {
	font-family: 'Gabarito', sans-serif !important;
	font-size: 38px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--gsff-primary);
	margin: 0 0 14px 0;
	letter-spacing: 0;
}
.gsff-title--light { color: #fff; }

.gsff-subtitle {
	font-size: 17px;
	color: var(--gsff-muted);
	margin: 0 0 24px 0;
}
.gsff-subtitle--light { color: rgba(255,255,255,0.92); }

.gsff-pill {
	display: inline-block;
	background: var(--gsff-accent);
	color: var(--gsff-primary);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: var(--gsff-radius-pill);
	margin-bottom: 12px;
}
.gsff-card--contact .gsff-pill {
	background: rgba(255,255,255,0.18);
	color: #fff;
}

.gsff-result-head { margin-bottom: 24px; }

/* ----- Fields ----- */
.gsff-field { margin-bottom: 18px; }
.gsff-field label,
.gsff-field-label {
	display: block;
	font-weight: 600;
	color: var(--gsff-primary);
	margin-bottom: 6px;
	font-size: 15px;
}
.gsff-card--contact .gsff-field label,
.gsff-card--contact .gsff-field-label { color: #fff; }

.gsff-field input[type="text"],
.gsff-field input[type="email"],
.gsff-field input[type="tel"],
.gsff-field input[type="number"] {
	width: 100%;
	padding: 14px 16px;
	border: 2px solid var(--gsff-accent);
	border-radius: var(--gsff-radius-sm);
	font-size: 16px;
	font-family: 'Gabarito', sans-serif;
	background: #fff;
	color: var(--gsff-text);
	transition: border-color .15s ease, box-shadow .15s ease;
	-webkit-appearance: none;
	appearance: none;
}
.gsff-card--contact .gsff-field input[type="text"],
.gsff-card--contact .gsff-field input[type="email"],
.gsff-card--contact .gsff-field input[type="tel"],
.gsff-card--contact .gsff-field input[type="number"] {
	background: rgba(255,255,255,0.85);
	border-color: rgba(255,255,255,0.65);
}
.gsff-field input:focus {
	outline: none;
	border-color: var(--gsff-hover);
	box-shadow: 0 0 0 3px rgba(106,143,78,0.18);
}

.gsff-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
@media (max-width: 600px) {
	.gsff-row { grid-template-columns: 1fr; gap: 0; }
}

.gsff-microcopy {
	font-size: 13px;
	color: rgba(255,255,255,0.85);
	margin: -8px 0 18px 0;
	line-height: 1.4;
}

.gsff-req { color: var(--gsff-error); }

/* ----- Tiles (Flächentyp) ----- */
.gsff-tiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-top: 8px;
}
.gsff-tile {
	position: relative;
	border-radius: var(--gsff-radius-md);
	background: rgba(255,255,255,0.18);
	cursor: pointer;
	overflow: hidden;
	border: 3px solid transparent;
	transition: border-color .15s, transform .15s;
	display: block;
}
.gsff-tile:hover { transform: translateY(-2px); }
.gsff-tile input[type="radio"] {
	position: absolute;
	top: 12px; left: 12px;
	width: 22px; height: 22px;
	margin: 0;
	accent-color: var(--gsff-primary);
	z-index: 2;
}
.gsff-tile-img {
	display: block;
	height: 130px;
	background-size: cover;
	background-position: center;
	background-color: rgba(0,0,0,0.15);
	background-repeat: no-repeat;
}
.gsff-tile-label {
	display: block;
	padding: 10px 14px;
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	background: rgba(0,0,0,0.25);
}
.gsff-tile input[type="radio"]:checked ~ .gsff-tile-label {
	background: var(--gsff-primary);
}
.gsff-tile:has(input[type="radio"]:checked) {
	border-color: var(--gsff-accent);
}

/* ----- Checkbox ----- */
.gsff-checkbox {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 18px 0 22px 0;
	font-size: 14px;
	color: rgba(255,255,255,0.95);
	line-height: 1.45;
	cursor: pointer;
}
.gsff-checkbox input[type="checkbox"] {
	margin-top: 3px;
	width: 20px; height: 20px;
	accent-color: var(--gsff-primary);
	flex-shrink: 0;
}
.gsff-checkbox a {
	color: #fff;
	text-decoration: underline;
	font-weight: 600;
}

/* ----- Buttons ----- */
.gsff-btn {
	font-family: 'Gabarito', sans-serif;
	font-size: 16px;
	font-weight: 600;
	padding: 16px 28px;
	border-radius: var(--gsff-radius-pill);
	border: 2px solid transparent;
	cursor: pointer;
	transition: background .15s, transform .15s, color .15s, border-color .15s;
	line-height: 1;
	text-align: center;
	display: inline-block;
	min-width: 180px;
}
.gsff-btn--primary {
	background: var(--gsff-primary);
	color: #fff;
	width: 100%;
}
.gsff-btn--primary:hover {
	background: var(--gsff-hover);
	transform: translateY(-1px);
}
.gsff-btn--ghost {
	background: transparent;
	color: var(--gsff-primary);
	border-color: var(--gsff-primary);
}
.gsff-btn--ghost:hover {
	background: var(--gsff-primary);
	color: #fff;
}
.gsff-btn--ghost-light {
	color: #fff;
	border-color: rgba(255,255,255,0.7);
}
.gsff-btn--ghost-light:hover {
	background: #fff;
	color: var(--gsff-primary);
}
.gsff-btn[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none !important;
}

.gsff-cta-row {
	display: flex;
	gap: 12px;
	margin-top: 24px;
	flex-wrap: wrap;
}
.gsff-cta-row .gsff-btn {
	flex: 1 1 200px;
	width: auto;
}

/* ----- Result ----- */
.gsff-result-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	background: var(--gsff-light-bg);
	border-radius: var(--gsff-radius-md);
	padding: 22px;
	margin-bottom: 18px;
}
.gsff-result-item {
	background: #fff;
	border-radius: var(--gsff-radius-sm);
	padding: 16px;
	border: 1px solid rgba(178,208,130,0.5);
}
.gsff-result-item__label {
	font-size: 13px;
	color: var(--gsff-muted);
	font-weight: 500;
	margin-bottom: 4px;
}
.gsff-result-item__value {
	font-size: 22px;
	font-weight: 600;
	color: var(--gsff-primary);
	line-height: 1.2;
}
.gsff-result-item--note {
	grid-column: 1 / -1;
	background: #fff5f8;
	border-color: rgba(204,51,102,0.35);
}
.gsff-result-item--note .gsff-result-item__value {
	color: var(--gsff-error);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
}

.gsff-disclaimer {
	font-size: 13px;
	color: var(--gsff-muted);
	line-height: 1.45;
	margin: 0;
}

/* Summary box im Kontaktformular: zeigt mitübergebene Werte */
.gsff-summary {
	background: rgba(255,255,255,0.12);
	border-radius: var(--gsff-radius-sm);
	padding: 14px 16px;
	font-size: 14px;
	color: #fff;
	margin: 16px 0 6px 0;
	border: 1px solid rgba(255,255,255,0.25);
}
.gsff-summary:empty { display: none; }
.gsff-summary strong { color: var(--gsff-accent); }

/* ----- Hints / Errors ----- */
.gsff-hint {
	color: var(--gsff-error);
	font-size: 14px;
	margin: 8px 0 0 0;
	font-weight: 500;
}
.gsff-hint--light { color: #ffd7e1; }

/* ----- Honeypot ----- */
.gsff-hp {
	position: absolute !important;
	left: -10000px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}

/* ----- Thanks step ----- */
.gsff-thanks-icon { margin-bottom: 18px; }

/* ----- Responsive ----- */
@media (max-width: 600px) {
	.gsff-card { padding: 22px; }
	.gsff-card--contact { padding: 24px; }
	.gsff-title { font-size: 28px; }
	.gsff-tiles { grid-template-columns: 1fr; }
	.gsff-tile-img { height: 120px; }
	.gsff-cta-row { flex-direction: column-reverse; }
	.gsff-cta-row .gsff-btn { width: 100%; }
}