/**
 * KH Beitragsrechner v2.2 – Stylesheet
 * KH Grün #2e636a · KH Orange #e84e0f · KH Text #677478
 */

/* Theme-sicher: [hidden] niemals überschreibbar */
#kh-rechner [hidden] { display: none !important; }

.kh-rechner {
	--kh-green:       #2e636a;
	--kh-green-light: #e8f0f1;
	--kh-orange:      #e84e0f;
	--kh-text:        #677478;
	--kh-dark:        #2e3a3c;
	--kh-bg:          #f5f7f7;
	--kh-white:       #ffffff;
	--kh-border:      #dce4e5;
	--kh-error:       #c0392b;
	--kh-error-bg:    #fdf3f2;
	--kh-radius-sm:   6px;
	--kh-radius:      10px;
	--kh-shadow:      0 1px 3px rgba(0,0,0,.08);
	--kh-font:        'Source Sans 3','Helvetica Neue',Arial,sans-serif;
	font-family: var(--kh-font);
	color: var(--kh-text);
	background: var(--kh-white);
	padding: 2rem 0 1.5rem;
	max-width: 100%;
	width: 100%;
	line-height: 1.5;
	box-sizing: border-box;
}
.kh-rechner *, .kh-rechner *::before, .kh-rechner *::after { box-sizing: inherit; }

/* ── Header ── */
.kh-rechner__header  { margin-bottom: 1.75rem; }
.kh-rechner__eyebrow { font-size:13px;font-weight:600;color:var(--kh-green);text-transform:uppercase;letter-spacing:.06em;margin:0 0 4px; }
.kh-rechner__title   { font-size:22px;font-weight:600;color:var(--kh-dark);margin:0 0 4px;line-height:1.2; }
.kh-rechner__subtitle{ font-size:15px;color:var(--kh-text);margin:0; }

/* ── Steps ── */
.kh-rechner__step { margin-bottom: 2rem; }
#kh-rechner .kh-rechner__step-label {
	display:flex !important;align-items:center !important;gap:9px !important;
	font-size:15px !important;font-weight:600 !important;letter-spacing:.04em !important;text-transform:uppercase !important;
	color:#2e636a !important;margin-bottom:.5rem !important;
}
.kh-rechner__step-num {
	width:22px;height:22px;border-radius:50%;background:var(--kh-green);color:white;
	font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.kh-rechner__hint { font-size:14px;color:var(--kh-text);margin:0 0 1rem; }

/* ── Info-Box ── */
.kh-rechner__info-box {
	display:flex;align-items:flex-start;gap:8px;background:#fffbf0;border:1px solid #f0d080;
	border-radius:var(--kh-radius-sm);padding:.65rem .9rem;margin-bottom:1rem;
	font-size:13px;color:#7a6020;line-height:1.5;
}
.kh-rechner__info-box svg { flex-shrink:0;margin-top:1px; }
.kh-rechner__info-box strong { font-weight:600; }

/* ── Einleitung ── */
.kh-intro {
	margin-bottom: 1.75rem;
}
.kh-intro__text {
	font-size: 15px;
	color: var(--kh-text);
	line-height: 1.7;
	margin: 0 0 .85rem;
}
.kh-intro__foodcoop {
	background: var(--kh-green-light);
	border-left: 4px solid var(--kh-green);
	border-radius: var(--kh-radius-sm);
	padding: .85rem 1.1rem;
	font-size: 14px;
	color: var(--kh-dark);
	line-height: 1.6;
	margin: 0;
}
.kh-intro__foodcoop a {
	color: var(--kh-green);
	font-weight: 600;
	text-decoration: none;
}
.kh-intro__foodcoop a:hover { text-decoration: underline; }

/* ── Abholort-Wrapper & Pflicht-Hinweis ── */
.kh-ort-wrapper { display: flex; flex-direction: column; gap: .6rem; }

.kh-ort-hint {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	margin: 0;
	padding: 1.1rem 1.5rem !important;
	padding-bottom: 1.1rem !important;
	background: #fff3cd; border: 1px solid #e0a800;
	border-radius: var(--kh-radius-sm);
	font-size: 14px !important; color: #856404; line-height: 1.5;
	text-align: center; width: 100%; box-sizing: border-box;
}
.kh-ort-hint svg { flex-shrink: 0; }

/* Select: Rahmen grün wenn Abholort gewählt */
.kh-rechner__select--chosen {
	border-color: #2e636a !important;
	background-color: #f0f7f7 !important;
}

.kh-rechner__select {
	width:100%;padding:.75rem 1rem;min-height:44px;border:1.5px solid var(--kh-border);
	border-radius:var(--kh-radius-sm);font-family:var(--kh-font);
	font-size:15px;color:var(--kh-dark);background:white;
}
.kh-rechner__select:focus { outline:none;border-color:var(--kh-green);box-shadow:0 0 0 3px rgba(46,99,106,.15); }

/* ── Toggle-Grid ── */
.kh-toggle-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:12px; }
@media(max-width:560px){ .kh-toggle-grid { grid-template-columns:1fr; } }

.kh-toggle {
	display:flex;flex-direction:column;align-items:flex-start;position:relative;width:100%;
	background:var(--kh-white)!important;border:2px solid var(--kh-border)!important;
	border-radius:var(--kh-radius)!important;padding:1rem!important;cursor:pointer;text-align:left;
	transition:border-color .15s,box-shadow .15s;box-shadow:var(--kh-shadow)!important;
	color:var(--kh-dark)!important;text-decoration:none!important;
}
.kh-toggle:hover  { border-color:var(--kh-green)!important; }
.kh-toggle:focus  { outline:none!important;box-shadow:0 0 0 3px rgba(46,99,106,.2)!important; }
.kh-toggle--active{ border-color:var(--kh-green)!important;background:var(--kh-green-light)!important; }
.kh-toggle__icon  { font-size:2rem;margin-bottom:8px;line-height:1; }
.kh-toggle__name  { font-size:15px;font-weight:600;color:var(--kh-dark)!important;margin-bottom:4px; }
.kh-toggle__desc  { font-size:13px;color:var(--kh-text)!important;line-height:1.4; }
.kh-toggle__check {
	position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;
	border:2px solid var(--kh-border);background:white;transition:background .15s,border-color .15s;
}
.kh-toggle--active .kh-toggle__check { background:var(--kh-green);border-color:var(--kh-green); }
.kh-toggle--active .kh-toggle__check::after {
	content:'';display:block;width:6px;height:9px;border:2px solid white;border-top:none;border-left:none;
	transform:rotate(45deg);position:absolute;top:3px;left:6px;
}

/* ── Mengen-Liste ── */
.kh-qty-list { display:flex;flex-direction:column;gap:12px; }
.kh-qty-card {
	background:var(--kh-white);border:1.5px solid var(--kh-border);
	border-radius:var(--kh-radius);overflow:hidden;box-shadow:var(--kh-shadow);
}
.kh-qty-card__header { display:flex;align-items:center;gap:8px;padding:.9rem 1.2rem .75rem; }
.kh-qty-card__icon   { font-size:1.3rem;line-height:1; }
.kh-qty-card__name   { font-size:16px;font-weight:600;color:var(--kh-dark); }
.kh-qty-card__intro  {
	font-size:13px;color:var(--kh-text);line-height:1.5;
	margin:0;padding:.25rem 1.2rem 1rem !important;padding-bottom:1rem !important;border-bottom:1px solid var(--kh-border);
}
.kh-qty-card__availability {
	font-size:12px;color:var(--kh-text);font-style:italic;
	margin:0;padding:.65rem 1.2rem;border-top:1px solid var(--kh-border);
}

/* ── Schritt-Buttons ── */
.kh-qty-card__steps { display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--kh-border); }
@media(max-width:480px){ .kh-qty-card__steps { grid-template-columns:repeat(2,1fr); } }

.kh-step-btn {
	display:flex;flex-direction:column;align-items:flex-start;padding:1rem 1.1rem 1.2rem !important;padding-bottom:1.2rem !important;
	background:var(--kh-white)!important;border:none!important;
	border-right:1px solid var(--kh-border)!important;border-bottom:1px solid var(--kh-border)!important;
	border-radius:0!important;cursor:pointer;text-align:left;line-height:1.3;position:relative;
	color:var(--kh-dark)!important;box-shadow:none!important;text-decoration:none!important;transition:background .12s;
}
.kh-qty-card__steps .kh-step-btn:nth-child(3n)        { border-right:none!important; }
.kh-qty-card__steps .kh-step-btn:nth-last-child(-n+3) { border-bottom:none!important; }
@media(max-width:480px){
	.kh-qty-card__steps .kh-step-btn:nth-child(3n)        { border-right:1px solid var(--kh-border)!important; }
	.kh-qty-card__steps .kh-step-btn:nth-child(2n)        { border-right:none!important; }
	.kh-qty-card__steps .kh-step-btn:nth-last-child(-n+3) { border-bottom:1px solid var(--kh-border)!important; }
	.kh-qty-card__steps .kh-step-btn:nth-last-child(-n+2) { border-bottom:none!important; }
}
.kh-step-btn:hover  { background:var(--kh-green-light)!important; }
.kh-step-btn:focus  { outline:none!important;box-shadow:inset 0 0 0 2px rgba(46,99,106,.4)!important; }
.kh-step-btn--active{ background:var(--kh-green-light)!important; }
.kh-step-btn--active::before { content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--kh-green); }
.kh-step-btn__size  { font-size:14px;font-weight:700;color:var(--kh-dark)!important;margin-bottom:3px; }
.kh-step-btn__qty   { font-size:13px;font-weight:600;color:var(--kh-dark)!important;margin-bottom:4px; }
.kh-step-btn__ex    { font-size:12px;color:var(--kh-text)!important;line-height:1.5; }
.kh-step-btn--active .kh-step-btn__size,
.kh-step-btn--active .kh-step-btn__qty,
.kh-step-btn--active .kh-step-btn__ex { color:var(--kh-green)!important; }

/* ── Ergebnis ── */
.kh-result { border-radius:var(--kh-radius);overflow:hidden;border:1.5px solid var(--kh-border);box-shadow:var(--kh-shadow); }
.kh-result__empty { padding: 1.5rem 1.2rem !important; padding-bottom: 1.5rem !important; text-align: center !important; color: var(--kh-text); font-size: 14px !important; min-height: 60px; display: flex; align-items: center; justify-content: center; }
#kh-rechner .kh-result__top {
	background: #e8f0f1 !important;
	border-bottom: 2px solid #2e636a !important;
	padding: 1.2rem 1.4rem !important;
	display: flex !important; align-items: center !important; gap: .75rem !important; flex-wrap: wrap !important;
}
#kh-rechner .kh-result__price       { font-size:32px !important;font-weight:700 !important;color:#2e636a !important;line-height:1 !important; }
#kh-rechner .kh-result__price-label { font-size:14px !important;color:#677478 !important; }
#kh-rechner .kh-result__week        { margin-left:auto !important;background:white !important;border:1px solid #dce4e5 !important;border-radius:20px !important;padding:5px 14px !important;font-size:13px !important;color:#677478 !important;white-space:nowrap !important; }
.kh-result__body        { background:var(--kh-bg);padding:.9rem 1.4rem; }
.kh-result__line {
	display:flex;justify-content:space-between;align-items:baseline;
	padding:5px 0;font-size:14px;color:var(--kh-text);border-bottom:1px solid var(--kh-border);gap:1rem;
}
.kh-result__line:last-child { border-bottom:none; }
.kh-result__line-lbl { flex:1; }
.kh-result__line-val { font-weight:600;color:var(--kh-dark);white-space:nowrap; }

/* Monatsbeitrag in KH-Grün (nicht Orange) */
.kh-result__line--total { padding-top:10px;margin-top:4px;border-top:2px solid var(--kh-border);font-size:15px;font-weight:600;color:var(--kh-dark); }
.kh-result__line--total .kh-result__line-val { color:var(--kh-green)!important;font-size:17px; }

/* ── Formular ── */
.kh-fieldset {
	border:1.5px solid var(--kh-border);border-radius:var(--kh-radius);
	padding:1.25rem 1.4rem;margin:0 0 1.25rem;background:var(--kh-white);
}
.kh-fieldset__legend   { font-size:15px;font-weight:600;color:var(--kh-green);padding:0 .5rem;text-transform:uppercase;letter-spacing:.05em; }
.kh-fieldset--checkboxes { background:var(--kh-bg); }
.kh-field              { margin-bottom:1rem; }
.kh-field:last-child   { margin-bottom:0; }
.kh-field-row          { display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem; }
.kh-field-row--3       { grid-template-columns:1fr 1fr 1fr; }
.kh-field-row--4       { grid-template-columns:1fr 1fr 1fr 1fr; }
.kh-field-row--5       { grid-template-columns:1fr 1fr 1fr 1fr 1fr; }
/* Straße nimmt 2/4 der Breite, PLZ fix schmal, Ort den Rest */
.kh-field-row--adresse { grid-template-columns:1.5fr 200px 1fr; }
.kh-field-row--plz     { grid-template-columns:140px 1fr; }
.kh-field-row--bank    { grid-template-columns:2fr 3fr 2fr; }
@media(max-width:900px){
	.kh-field-row--5 { grid-template-columns:1fr 1fr 1fr; }
}
@media(max-width:680px){
	.kh-field-row--4,
	.kh-field-row--5 { grid-template-columns:1fr 1fr; }
	.kh-field-row--adresse { grid-template-columns:1fr 80px; }
	.kh-field-row--adresse .kh-field:first-child { grid-column:1/-1; }
}
@media(max-width:560px){
	.kh-field-row,
	.kh-field-row--3,
	.kh-field-row--4,
	.kh-field-row--5,
	.kh-field-row--adresse,
	.kh-field-row--plz,
	.kh-field-row--bank { grid-template-columns:1fr; }
}
.kh-field__label       { display:block;font-size:14px;font-weight:500;color:var(--kh-dark);margin-bottom:5px; }
.kh-field__required    { color:var(--kh-error); }
.kh-field__input {
	width:100%;padding:.75rem 1rem;border:1.5px solid var(--kh-border);border-radius:var(--kh-radius-sm);
	font-family:var(--kh-font);font-size:15px;color:var(--kh-dark);background:white;transition:border-color .15s;min-height:44px;
}
.kh-field__input:focus { outline:none;border-color:var(--kh-green);box-shadow:0 0 0 3px rgba(46,99,106,.15); }
.kh-field__input--error{ border-color:var(--kh-error)!important; }
.kh-field__input--mono { font-family:'Courier New',monospace;letter-spacing:.05em; }
.kh-field__error       { display:none;font-size:13px;color:var(--kh-error);margin-top:4px; }
.kh-field__error--visible { display:block; }

/* SEPA-Fieldset: grauer Hintergrund damit Überschrift sichtbar drinsitzt */
/* SEPA-Fieldset: weißer Hintergrund, Bankfelder-Zeile mit Abstand */
.kh-fieldset--sepa { background: var(--kh-white); }
.kh-fieldset--sepa .kh-field-row--bank { margin-bottom: 1.25rem; }

/* Bankdaten in einer Zeile: Kontoinhaber 2fr, IBAN 3fr, BIC 2fr */
.kh-field-row--bank { grid-template-columns: 2fr 3fr 2fr; margin-bottom: 1rem; }
@media (max-width: 600px) { .kh-field-row--bank { grid-template-columns: 1fr; } }

/* SEPA-Info im grauen Kasten NACH den Bankfeldern */
.kh-sepa-info {
	background:var(--kh-bg);border:1px solid var(--kh-border);border-radius:var(--kh-radius-sm);
	padding:.85rem 1rem;margin-bottom:1.1rem;font-size:13px;color:var(--kh-text);line-height:1.6;
}
.kh-sepa-info p           { margin:0 0 .5rem; }
.kh-sepa-info p:last-child { margin:0; }
.kh-sepa-info__heading    { font-size:15px;font-weight:600;color:var(--kh-dark);margin-bottom:.75rem; }
.kh-sepa-info__parties {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .5rem 1.5rem;
	background: white;
	border: 1px solid var(--kh-border);
	border-radius: var(--kh-radius-sm);
	padding: .75rem 1rem;
	margin-bottom: .85rem;
	font-size: 13px;
}
@media (max-width: 560px) { .kh-sepa-info__parties { grid-template-columns: 1fr; } }
.kh-sepa-info__parties > div { display: flex; flex-direction: column; gap: 2px; }
.kh-sepa-info__label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--kh-text); margin-bottom: 2px; }
.kh-sepa-info__parties code { font-size: 12px; background: var(--kh-bg); padding: 1px 5px; border-radius: 3px; }
.kh-sepa-info__note       { font-size:12px;font-style:italic; }

/* Checkboxen – korrekte Struktur: Fehler unter dem Label */
.kh-checkbox {
	display:flex;align-items:flex-start;gap:10px;margin-bottom:1.25rem;
}
.kh-checkbox:last-of-type { margin-bottom:0; }
.kh-checkbox__input {
	width:18px;height:18px;flex-shrink:0;margin:3px 0 0;
	accent-color:var(--kh-green);cursor:pointer;
}
.kh-checkbox__body  { display:flex;flex-direction:column; }
.kh-checkbox__label { font-size:14px;color:var(--kh-dark);cursor:pointer;line-height:1.6; }
.kh-checkbox__label a { color:var(--kh-green);text-decoration:underline; }
.kh-checkbox__label a:hover { color:var(--kh-orange); }

.kh-form__required-note { font-size:12px;color:var(--kh-text);margin:1rem 0 0; }

/* Vertragstext */
.kh-vertragstext {
	background: var(--kh-bg);
	border: 1.5px solid var(--kh-border);
	border-left: 4px solid var(--kh-green);
	border-radius: var(--kh-radius-sm);
	padding: 1.1rem 1.3rem;
	margin: 0 0 1.25rem;
	font-size: 14px;
	color: var(--kh-dark);
	line-height: 1.7;
}
.kh-vertragstext__heading {
	font-size: 16px;
	font-weight: 600;
	color: var(--kh-green);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 0.75rem;
}
.kh-vertragstext p {
	margin: 0 0 0.75rem;
}
.kh-vertragstext p:last-child {
	margin: 0;
}
.kh-vertragstext a {
	color: var(--kh-green);
	font-weight: 600;
}

.kh-vertragstext--kuendigung {
	border-left-color: var(--kh-orange);
}
.kh-vertragstext--kuendigung .kh-vertragstext__heading {
	color: var(--kh-orange);
}
.kh-vertragstext__solidarity {
	font-style: italic;
	color: var(--kh-text);
	border-top: 1px solid var(--kh-border);
	padding-top: 0.75rem;
	margin-top: 0.25rem;
}

/* ── Ernterisiko-Hinweis ── */
.kh-ernte-hinweis {
	background: #f5f7f7;
	border: 1.5px solid #dce4e5;
	border-left: 4px solid #2e636a;
	border-radius: 6px;
	padding: 1.1rem 1.3rem;
	margin: 0 0 1.5rem;
	font-size: 14px;
	color: #2e3a3c;
	line-height: 1.7;
}
.kh-ernte-hinweis__heading {
	font-size: 15px !important;
	font-weight: 600;
	color: #2e636a;
	text-transform: uppercase;
	letter-spacing: .05em;
	margin: 0 0 .75rem;
}
.kh-ernte-hinweis p           { margin: 0 0 .75rem; }
.kh-ernte-hinweis p:last-child { margin: 0; }
.kh-ernte-hinweis__positiv    { font-style: italic; color: #677478; }

/* ── Optionale Felder ── */
.kh-field__optional {
	font-size: 12px;
	font-weight: 400;
	color: #677478;
	margin-left: 4px;
}

/* ── Kontoinhaber-Adresse ── */
.kh-field--kontoinhaber-adresse           { margin-top: .75rem; }
.kh-field__label--group                   { display:block;font-size:14px;font-weight:500;color:#2e3a3c;margin-bottom:.5rem; }
.kh-field__label--sub                     { font-size:13px;color:#677478; }

/* Kündigungshinweis */
.kh-kuendigung-box {
	display:flex;align-items:flex-start;gap:10px;margin-bottom:1.25rem;padding:.9rem 1.1rem;
	background:var(--kh-green-light);border:1.5px solid var(--kh-green);
	border-radius:var(--kh-radius-sm);font-size:14px;color:var(--kh-dark);line-height:1.6;
}
.kh-kuendigung-box svg    { flex-shrink:0;margin-top:2px; }
.kh-kuendigung-box strong { font-weight:600; }
.kh-kuendigung-box p      { margin:0; }
.kh-kuendigung-box a      { color:var(--kh-green);font-weight:600; }

/* Submit */
.kh-form__submit-row  { text-align:center;margin-top:1.5rem; }
.kh-form__submit-hint { font-size:13px;color:var(--kh-text);margin:.75rem 0 0; }
.kh-btn-submit {
	display:inline-block;padding:.9rem 2.5rem;
	background:var(--kh-orange)!important;color:white!important;
	font-family:var(--kh-font)!important;font-size:16px!important;font-weight:600!important;
	border:none!important;border-radius:var(--kh-radius-sm)!important;cursor:pointer;
	transition:background .15s;text-decoration:none!important;
	box-shadow:0 2px 6px rgba(232,78,15,.35)!important;
}
.kh-btn-submit:hover:not(:disabled) { background:#c43d08!important; }
.kh-btn-submit:disabled             { opacity:.65!important;cursor:not-allowed!important; }

.kh-form__error-box {
	margin-top:1rem;padding:.85rem 1rem;background:var(--kh-error-bg);
	border:1px solid var(--kh-error);border-radius:var(--kh-radius-sm);
	font-size:14px;color:var(--kh-error);
}

/* Erfolgsmeldung */
.kh-success {
	text-align:center;padding:2.5rem 1.5rem;background:var(--kh-green-light);
	border:2px solid var(--kh-green);border-radius:var(--kh-radius);margin-top:1rem;
}
.kh-success__icon    { font-size:3rem;margin-bottom:.75rem; }
.kh-success__title   { font-size:20px;font-weight:600;color:var(--kh-dark);margin:0 0 .75rem; }
.kh-success__text    { font-size:15px;color:var(--kh-text);margin:0 0 1.25rem;line-height:1.6; }
.kh-success__details {
	display:inline-block;text-align:left;background:white;
	border:1px solid var(--kh-border);border-radius:var(--kh-radius-sm);
	padding:1rem 1.25rem;font-size:14px;color:var(--kh-dark);line-height:1.8;
}