/* ECO Registrierung – Schriften lokal (keine Google-Server, DSGVO-freundlich) */
@font-face{font-family:"ECO Plex";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"ECO Plex";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"ECO Plex";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"ECO Plex Cond";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"ECO Plex Cond";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-condensed-latin-700-normal.woff2) format("woff2")}

.eco-reg{
	--eco-ink:#10232A; --eco-ink-2:#1D3A42; --eco-line-dark:#2B4A52;
	--eco-mint:#7ED3A8; --eco-green:#1A6B4F; --eco-green-dark:#0F4A36; --eco-green-soft:#E3F2EA;
	--eco-text:#10232A; --eco-muted:#4E5F5A; --eco-muted-dark:#C9D6D2;
	--eco-line:#B9C4C0; --eco-card-line:#D6DDDA; --eco-soft:#F6F8F7; --eco-chip:#F1F3F2; --eco-req:#A3401C;
	display:flex; flex-wrap:wrap; gap:32px; align-items:flex-start;
	margin:8px 0 48px; color:var(--eco-text);
	font-family:"ECO Plex",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:16px; line-height:1.5;
	text-align:left;
}
.eco-reg *,.eco-reg *::before,.eco-reg *::after{box-sizing:border-box}
.eco-reg a{color:var(--eco-green); text-decoration:underline; text-underline-offset:2px}
.eco-reg a:hover{color:var(--eco-green-dark)}
.eco-reg .eco-ico{flex:none; width:24px; height:24px}

/* ---------- linke Spalte ---------- */
.eco-reg__aside{
	flex:1 1 320px; min-width:0; background:var(--eco-ink); color:#fff;
	border-radius:12px; padding:36px 32px; display:flex; flex-direction:column; gap:28px;
}
.eco-reg__intro{display:flex; flex-direction:column; gap:10px}
.eco-reg__eyebrow{font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--eco-mint)}
.eco-reg .eco-reg__claim{margin:0; font-family:"ECO Plex Cond",sans-serif; font-weight:700; font-size:40px; line-height:1.08; color:#fff}
.eco-reg .eco-reg__lead{margin:0; color:var(--eco-muted-dark); font-size:16px; line-height:1.55}
.eco-reg__coupon{border:2px dashed var(--eco-mint); border-radius:10px; padding:20px; display:flex; flex-direction:column; gap:6px; font-size:15px; color:var(--eco-muted-dark)}
.eco-reg__coupon-pct{font-family:"ECO Plex Cond",sans-serif; font-weight:700; font-size:34px; line-height:1.1; color:var(--eco-mint)}
.eco-reg__coupon code,.eco-reg__done-coupon code{
	font-family:"ECO Plex Cond",sans-serif; font-weight:700; letter-spacing:.08em; font-size:15px;
	background:var(--eco-ink-2); color:#fff; padding:2px 8px; border-radius:4px; border:0;
}
.eco-reg__usp{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px}
.eco-reg__usp li{display:flex; gap:14px; align-items:flex-start; margin:0; padding:0; font-size:15px; color:var(--eco-muted-dark); background:none}
.eco-reg__usp li::before{display:none}
.eco-reg__usp .eco-ico{color:var(--eco-mint)}
.eco-reg__usp strong{display:block; color:#fff; font-weight:600}
.eco-reg .eco-reg__firm{margin:0; border-top:1px solid var(--eco-line-dark); padding-top:18px; font-size:14px; color:var(--eco-muted-dark)}

/* ---------- Karte rechts ---------- */
.eco-reg__card{flex:999 1 540px; min-width:0; background:#fff; border:1px solid var(--eco-card-line); border-radius:12px; padding:32px}
.eco-reg__tabs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); background:var(--eco-chip); border-radius:10px; padding:4px; margin-bottom:28px}
.eco-reg .eco-reg__tabs button{
	appearance:none; border:0; margin:0; min-height:48px; border-radius:7px; background:transparent; color:var(--eco-muted);
	font:600 16px/1.2 "ECO Plex",system-ui,sans-serif; cursor:pointer; box-shadow:none; text-transform:none; letter-spacing:0; padding:0 12px;
}
.eco-reg .eco-reg__tabs button[aria-selected="true"]{background:#fff; color:var(--eco-text); box-shadow:0 1px 3px rgba(16,35,42,.15)}
.eco-reg .eco-reg__tabs button:focus-visible{outline:3px solid #9FD4BC; outline-offset:1px}
.eco-reg__panel[hidden]{display:none !important}
.eco-reg .eco-reg__title{margin:0 0 20px; font-family:"ECO Plex Cond",sans-serif; font-weight:600; font-size:28px; color:var(--eco-text)}

.eco-reg .eco-form{display:flex; flex-direction:column; gap:26px; margin:0; padding:0; border:0}
.eco-steps{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; font-size:14px}
.eco-steps li{margin:0; padding:8px 12px; border-radius:999px; background:var(--eco-chip); color:var(--eco-muted)}
.eco-steps li::before{display:none}
.eco-steps li.is-on{background:var(--eco-green-soft); color:var(--eco-green-dark); font-weight:600}

/* Kundenart */
.eco-reg .eco-art{margin:0; padding:0; border:0; min-width:0}
.eco-reg .eco-art legend{font-size:14px; font-weight:500; margin:0 0 10px; padding:0; color:var(--eco-text); border:0; width:auto; float:none; text-transform:none; letter-spacing:0}
.eco-art__opt{position:relative; display:block; margin:0; cursor:pointer}
.eco-art__opt input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.eco-art__box{display:flex; flex-direction:column; gap:4px; min-height:76px; padding:16px; border:1px solid var(--eco-line); border-radius:8px; background:#fff; transition:border-color .15s,background .15s}
.eco-art__box strong{font-size:16px; font-weight:600; color:var(--eco-text)}
.eco-art__box span{font-size:13px; color:var(--eco-muted)}
.eco-art__opt input:checked + .eco-art__box{border:2px solid var(--eco-green); padding:15px; background:var(--eco-green-soft)}
.eco-art__opt input:focus-visible + .eco-art__box{outline:3px solid #9FD4BC; outline-offset:2px}

/* Gruppen und Felder */
.eco-box{display:flex; flex-direction:column; gap:16px; background:var(--eco-soft); border-radius:10px; padding:20px}
.eco-group{display:flex; flex-direction:column; gap:16px}
.eco-reg .eco-sub{margin:0; font-family:"ECO Plex Cond",sans-serif; font-weight:600; font-size:18px; color:var(--eco-text)}
.eco-grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.eco-grid-name{display:grid; grid-template-columns:110px minmax(0,1fr) minmax(0,1fr); gap:16px}
.eco-grid-str{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,1fr); gap:16px}
.eco-grid-ort{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,2fr); gap:16px}
.eco-fld{display:flex; flex-direction:column; gap:6px; min-width:0; margin:0}
.eco-reg .eco-fld label{margin:0; padding:0; font-size:14px; font-weight:500; color:var(--eco-text); line-height:1.3; text-transform:none; letter-spacing:0}
.eco-reg .eco-fld input[type="text"],
.eco-reg .eco-fld input[type="email"],
.eco-reg .eco-fld input[type="tel"],
.eco-reg .eco-fld input[type="password"],
.eco-reg .eco-fld select{
	display:block; width:100%; height:48px; margin:0; padding:0 14px; border:1px solid var(--eco-line); border-radius:6px;
	background:#fff; color:var(--eco-text); font:400 16px/1.2 "ECO Plex",system-ui,sans-serif; box-shadow:none; max-width:none;
}
.eco-reg .eco-fld select{padding-right:36px; appearance:auto}
.eco-reg .eco-fld input:focus,.eco-reg .eco-fld select:focus{outline:3px solid #9FD4BC; outline-offset:0; border-color:var(--eco-green)}
.eco-reg .eco-fld input::placeholder{color:#8A9893}
.eco-req{color:var(--eco-req)}
.eco-reg .eco-hint{font-size:13px; line-height:1.45; color:var(--eco-muted); margin:0}
.eco-center{text-align:center}
.eco-inline{display:flex; gap:8px}
.eco-inline input{flex:1 1 auto; min-width:0; text-transform:uppercase}
.eco-reg .eco-hint.is-ok{color:var(--eco-green-dark); font-weight:600}
.eco-reg .eco-hint.is-bad{color:var(--eco-req); font-weight:600}

/* Passwort mit Augen-Knopf */
.eco-pw{position:relative}
.eco-reg .eco-pw input{padding-right:124px !important}
.eco-reg .eco-pw__toggle{
	position:absolute; right:4px; top:4px; height:40px; margin:0; padding:0 12px; display:flex; align-items:center; gap:6px;
	border:0; border-radius:4px; background:var(--eco-chip); color:var(--eco-text); cursor:pointer; box-shadow:none;
	font:500 14px/1 "ECO Plex",system-ui,sans-serif; text-transform:none; letter-spacing:0; min-width:0;
}
.eco-reg .eco-pw__toggle .eco-ico{width:18px; height:18px}
/* WooCommerce-Passwortstärke-Balken ausblenden (wir haben einen eigenen Hinweis) */
.eco-reg .woocommerce-password-strength,.eco-reg .woocommerce-password-hint,.eco-reg .show-password-input{display:none !important}

/* Checkboxen */
.eco-consent{display:flex; flex-direction:column; gap:12px; font-size:14px; line-height:1.5}
.eco-reg .eco-check{display:flex; gap:12px; align-items:flex-start; margin:0; cursor:pointer; font-size:14px; font-weight:400; color:var(--eco-text)}
.eco-reg .eco-check input{flex:none; width:20px; height:20px; margin:1px 0 0; accent-color:var(--eco-green)}
.eco-row-between{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; font-size:14px}

/* Knöpfe */
.eco-reg .eco-btn,
.eco-reg a.eco-btn{
	display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:52px; margin:0; padding:0 24px;
	border:0; border-radius:8px; background:var(--eco-green); color:#fff !important; text-decoration:none;
	font:600 18px/1.2 "ECO Plex Cond",sans-serif; letter-spacing:.02em; text-transform:none; cursor:pointer; box-shadow:none;
}
.eco-reg .eco-btn:hover{background:var(--eco-green-dark); color:#fff}
.eco-reg .eco-btn:focus-visible{outline:3px solid #9FD4BC; outline-offset:2px}
.eco-reg .eco-btn--big{min-height:56px; font-size:19px}
.eco-reg .eco-btn[disabled]{opacity:.7; cursor:wait}
.eco-reg .eco-btn-ghost{
	flex:none; height:48px; margin:0; padding:0 16px; border:1px solid var(--eco-green); border-radius:6px; background:#fff;
	color:var(--eco-green); font:600 15px/1 "ECO Plex",system-ui,sans-serif; cursor:pointer; text-transform:none; letter-spacing:0; box-shadow:none; min-width:0;
}
.eco-reg .eco-btn-ghost:hover{background:var(--eco-green-soft)}

/* Kundenart-Abhängiges */
.eco-reg:not([data-art="firma"]) .eco-only-firma{display:none !important}
.eco-reg[data-art="firma"] .eco-only-privat{display:none !important}

/* Spam-Falle */
.eco-hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden}

/* Bestätigung */
.eco-reg__done{display:flex; flex-direction:column; gap:18px; align-items:flex-start; padding:16px 0}
.eco-reg__done-ico{display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:var(--eco-green-soft); color:var(--eco-green)}
.eco-reg__done-ico .eco-ico{width:30px; height:30px}
.eco-reg .eco-reg__done h2{margin:0; font-family:"ECO Plex Cond",sans-serif; font-weight:600; font-size:30px; color:var(--eco-text)}
.eco-reg .eco-reg__done p{margin:0; font-size:17px; line-height:1.55; max-width:540px}
.eco-reg__done-coupon{background:var(--eco-soft); padding:16px 18px; border-radius:10px; font-size:15px !important}
.eco-reg__done-coupon code{background:var(--eco-ink)}
.eco-reg__done .eco-btn{width:auto}

/* Handy */
@media (max-width:640px){
	.eco-reg{gap:20px}
	.eco-reg__card{padding:22px 16px}
	.eco-reg__aside{padding:26px 20px; gap:20px}
	.eco-reg .eco-reg__claim{font-size:32px}
	.eco-reg__usp{display:none}
	.eco-grid-2,.eco-grid-str{grid-template-columns:minmax(0,1fr)}
	.eco-grid-name{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
	.eco-grid-name .eco-fld:first-child{grid-column:1 / -1}
	.eco-grid-ort{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
	.eco-grid-ort .eco-fld:last-child{grid-column:1 / -1}
	.eco-grid-2 .eco-art__opt{min-width:0}
}
/* Auf dem Handy die Karte zuerst, Vorteile darunter */
@media (max-width:900px){
	.eco-reg__card{order:-1}
}

/* 1.1: Anrede als Knöpfe (Firma / Herr / Frau), Schritt-Zeile */
.eco-reg .eco-anrede{margin:0; padding:0; border:0; min-width:0}
.eco-reg .eco-anrede legend{font-size:14px; font-weight:500; margin:0 0 10px; padding:0; color:var(--eco-text); border:0; width:auto; float:none; text-transform:none; letter-spacing:0}
.eco-seg{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.eco-seg__opt{position:relative; display:block; margin:0; cursor:pointer}
.eco-seg__opt input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.eco-seg__opt span{display:flex; align-items:center; justify-content:center; min-height:52px; padding:0 8px; border:1px solid var(--eco-line); border-radius:8px; background:#fff; font-weight:600; font-size:16px; color:var(--eco-text); transition:border-color .15s,background .15s}
.eco-seg__opt:hover span{border-color:var(--eco-green)}
.eco-seg__opt input:checked + span{border:2px solid var(--eco-green); background:var(--eco-green-soft); color:var(--eco-green-dark)}
.eco-seg__opt input:focus-visible + span{outline:3px solid #9FD4BC; outline-offset:2px}
.eco-reg .eco-stepline{margin:0; font-size:14px; color:var(--eco-muted)}
.eco-reg .eco-stepline strong{color:var(--eco-green-dark); font-weight:600}
/* WhatsApp-Knopf würde am Handy die Felder verdecken – nur auf dieser Seite ausblenden */
@media (max-width:768px){ .ht-ctc, #ht-ctc-chat, .ht_ctc_chat_style{display:none !important} }
#eco_uid::placeholder{font-size:14px; text-transform:none; letter-spacing:0}
/* Handy: „Prüfen“ unter das UID-Feld, damit das Beispiel ganz lesbar ist */
.eco-reg .eco-box{container-type:inline-size}
@container (max-width:420px){ .eco-reg .eco-inline{flex-wrap:wrap} .eco-reg .eco-inline input{flex:1 1 100%; min-width:0} .eco-reg .eco-inline .eco-btn-ghost{flex:1 1 100%} }
/* Gutschein-Code gut lesbar */
.eco-reg .eco-reg__coupon code{display:inline-block; color:var(--eco-ink) !important; background:var(--eco-mint) !important; font-size:16px !important; font-weight:700; letter-spacing:.06em; padding:4px 10px; border-radius:6px}
.eco-reg .eco-reg__done-coupon code{color:#fff !important; background:var(--eco-green) !important; font-weight:700; letter-spacing:.06em; padding:3px 9px; border-radius:6px}