/**
 * Re-Skin /mein-konto/ Login + Registrierung (Hero + Pill, Variante C „weiß").
 * Alles gescopt auf body.ks-konto-skin → nur aktiv, wenn ksc3_konto_skin_active().
 * Stylt die BESTEHENDEN WooCommerce-Formulare um; ändert KEINE Auth-Logik.
 */

/* Karte horizontal + vertikal mittig + breiter: .woocommerce wird zum Zentrier-Container.
   (body.ks-konto-skin sitzt nur ausgeloggt/Vorschau → betrifft NICHT das eingeloggte Konto.) */
body.ks-konto-skin .woocommerce{
	display:flex !important;align-items:center;justify-content:center;
	min-height:76vh;width:100% !important;max-width:none !important;float:none !important;padding:24px 0;
}
body.ks-konto-skin .bb-grid.site-content-grid{margin-left:0 !important;margin-right:0 !important;}
body.ks-konto-skin .bsMyAccount{width:100%;max-width:560px;margin:0;padding:0;background:none;}
body.ks-konto-skin .ks-konto-wrap{
	width:100%;max-width:none;margin:0;
	font-family:'Yantramanav Light','Yantramanav Regular','Yantramanav',system-ui,sans-serif;
	color:#253D54;line-height:1.6;
}
body.ks-konto-skin .ks-konto-wrap *{box-sizing:border-box;}
/* internen Leerraum der WooCommerce-Formularspalten straffen */
body.ks-konto-skin .bb_customer_login,
body.ks-konto-skin .bb_customer_register{margin:0;padding:0;}

/* Hero */
body.ks-konto-skin .ks-konto-hero{
	position:relative;text-align:center;color:#fff;padding:44px 26px 92px;border-radius:16px;
	background:
		radial-gradient(900px 460px at 82% 120%, rgba(50,101,105,.55), rgba(50,101,105,0) 60%),
		radial-gradient(700px 420px at 12% -20%, rgba(225,221,212,.22), rgba(225,221,212,0) 55%),
		linear-gradient(135deg,#253D54 0%,#2b4c5f 46%,#326569 100%);
}
body.ks-konto-skin .ks-konto-logo{display:inline-flex;align-items:center;justify-content:center;gap:13px;margin:0 0 18px;}
body.ks-konto-skin .ks-konto-logo-mark{width:46px;height:46px;display:block;}
body.ks-konto-skin .ks-konto-logo-img{max-height:64px;width:auto;display:block;}
body.ks-konto-skin .ks-konto-logo-text{font-family:Cinzel,Georgia,'Times New Roman',serif;font-weight:500;font-size:24px;letter-spacing:3px;color:#fff;text-transform:uppercase;line-height:1;}
body.ks-konto-skin .ks-konto-eyebrow{font-size:12.5px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.78);margin:0 0 10px;}
body.ks-konto-skin .ks-konto-title{font-family:Cinzel,Georgia,'Times New Roman',serif;font-weight:500;font-size:29px;line-height:1.18;letter-spacing:.5px;margin:0 0 12px;color:#fff !important;}
body.ks-konto-skin .ks-konto-intro{font-size:19px;line-height:1.5;color:rgba(255,255,255,.9);max-width:400px;margin:0 auto;}

/* Karte überlappt den Hero */
body.ks-konto-skin .ks-konto-card{
	position:relative;z-index:2;display:flex;flex-direction:column;
	margin:-56px auto 64px;background:#fff;border-radius:18px;
	box-shadow:0 30px 60px -30px rgba(11,24,38,.5);padding:26px 30px 30px;
}

/* Pill-Umschalter
 *
 * Seit 1.45.2 über die volle Kartenbreite statt nach Textbreite (Frank 24.08.2026:
 * „Mach mal die Login-Felder breiter, am besten so breit wie das Pill-Menü").
 *
 * Die Felder sind jetzt so breit wie die Karte (siehe Block „Formular-Einrückung"
 * unten). Bliebe die Pille bei `inline-flex`, wäre sie plötzlich SCHMALER als die
 * Felder darunter, und die Einrückung wäre nur an eine andere Stelle gewandert.
 * `stretch` plus `flex:1` auf den Tabs macht beide Kanten deckungsgleich.
 *
 * Bewusst nur hier: Der Projektstandard `.ks-tabs` bleibt `inline-flex`. Auf dieser
 * Seite gibt es genau zwei Tabs, die eine Karte überschreiben - das ist etwas anderes
 * als eine Filterleiste mit wechselnd vielen Einträgen. */
body.ks-konto-skin .ks-konto-tabs{align-self:stretch;display:flex;gap:6px;background:#e9e4d9;border-radius:12px;padding:5px;margin:0 0 24px;}
body.ks-konto-skin .ks-konto-tab{
	flex:1 1 0; /* beide Tabs gleich breit, damit die Pille die Karte ausfüllt (1.45.2) */
	border:0;background:transparent;color:#6f7c86;
	font-family:'Yantramanav Light','Yantramanav Regular','Yantramanav',system-ui,sans-serif;
	font-size:15px;line-height:1;padding:11px 24px;border-radius:8px;cursor:pointer;
	transition:background-color .2s ease,color .2s ease;
}
body.ks-konto-skin .ks-konto-tab:hover{background:#326569;color:#fff;}
body.ks-konto-skin .ks-konto-tab.is-active,
body.ks-konto-skin .ks-konto-tab.is-active:hover{background:#253D54;color:#fff;}

/* Spalten-Umschaltung (Login/Register) */
body.ks-konto-skin #customer_login{display:block;margin:0;}
body.ks-konto-skin #customer_login .u-column1,
body.ks-konto-skin #customer_login .u-column2{width:100%!important;max-width:100%!important;float:none!important;margin:0!important;padding:0!important;}
body.ks-konto-skin .ks-konto-forms[data-ks-konto-mode="login"] #customer_login .u-column2{display:none;}
body.ks-konto-skin .ks-konto-forms[data-ks-konto-mode="register"] #customer_login .u-column1{display:none;}
/* Die eigenen Formular-Überschriften (Login/Register) weg — der Pill benennt es */
body.ks-konto-skin .bb_customer_login>h2,
body.ks-konto-skin .bb_customer_register>h2,
body.ks-konto-skin .wc-MyAccount-sub-heading{display:none;}

/* 🔑 Formular-Einrückung entfernen (1.45.2).
 *
 * Frank: „Mach mal die Login-Felder breiter, am besten so breit wie das Pill-Menü."
 *
 * Die Felder waren schon immer `width:100%` - eng gemacht hat sie nicht meine CSS,
 * sondern WooCommerce selbst: `.woocommerce form.login` und `form.register` bringen
 * von Haus aus `padding:20px`, einen 1px-Rahmen und `margin:2em 0` mit. Auf dem Handy
 * kostete das rund 42px Breite, die Felder standen sichtbar innerhalb der Pille.
 *
 * Der Rahmen ist hier ohnehin doppelt gemoppelt: Die Karte IST schon der Rahmen.
 * Deshalb Rahmen, Polsterung und Radius weg, statt die Felder mit einer negativen
 * Marge künstlich herauszuziehen - das würde bei der kleinsten Änderung an der Karte
 * wieder auseinanderlaufen. */
body.ks-konto-skin .ks-konto-forms form.login,
body.ks-konto-skin .ks-konto-forms form.register,
body.ks-konto-skin .ks-konto-forms .bb_customer_login,
body.ks-konto-skin .ks-konto-forms .bb_customer_register{
	padding:0;border:0;margin:0;border-radius:0;background:none;width:100%;max-width:none;
}

/* Formularfelder */
body.ks-konto-skin .woocommerce-form-row,
body.ks-konto-skin .form-row{margin:0 0 16px;padding:0;}
body.ks-konto-skin .ks-konto-forms label{display:block;font-size:13px;letter-spacing:.3px;color:#253D54;margin:0 0 6px;}
body.ks-konto-skin .ks-konto-hint{display:block;font-size:12.5px;color:#6f7c86;margin:-3px 0 6px;}
body.ks-konto-skin .ks-konto-opt{color:#6f7c86;}
body.ks-konto-skin .woocommerce-Input.input-text,
body.ks-konto-skin .ks-konto-forms input.input-text,
body.ks-konto-skin .ks-konto-forms input[type="text"],
body.ks-konto-skin .ks-konto-forms input[type="email"],
body.ks-konto-skin .ks-konto-forms input[type="password"]{
	/* 🔴 16px ist die Untergrenze, keine Geschmacksfrage (1.45.2): Bei kleinerer
	 * Schrift zoomt iOS beim Antippen automatisch in das Feld hinein, die Seite
	 * springt und der Nutzer muss danach wieder herauszoomen. Steht so auch in
	 * Franks Mobil-Ansage vom 24.08.2026, Punkt 3. Vorher 15px. */
	width:100%;padding:13px 14px;font-family:inherit;font-size:16px;color:#253D54;
	background:#fff;border:1px solid #e4e0d6;border-radius:10px;
	transition:border-color .18s ease,box-shadow .18s ease;
}
body.ks-konto-skin .ks-konto-forms input:focus{outline:none;border-color:#253D54;box-shadow:0 0 0 3px rgba(37,61,84,.13);}
body.ks-konto-skin .required{color:#931204;border:0;}

/* „Angemeldet bleiben" + „Passwort vergessen" */
body.ks-konto-skin .woocommerce-LostPassword.lost_password,
body.ks-konto-skin .lost_password{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 16px;}
body.ks-konto-skin .lost_password label{display:inline;margin:0;font-size:14px;}
body.ks-konto-skin .lost_password a{margin-left:auto;color:#326569;text-decoration:none;font-size:14px;}
body.ks-konto-skin .lost_password a:hover{color:#253D54;}
body.ks-konto-skin input[type="checkbox"]{width:auto;accent-color:#253D54;margin-right:6px;vertical-align:middle;}

/* Eigene Checkbox-Zeilen (Newsletter/AGB) */
body.ks-konto-skin .ks-konto-check label{display:flex;align-items:flex-start;gap:9px;font-size:14px;line-height:1.45;color:#253D54;}
body.ks-konto-skin .ks-konto-check input{margin-top:2px;flex:0 0 auto;}
body.ks-konto-skin .ks-konto-cbtext{flex:1;}
body.ks-konto-skin .ks-konto-check a{color:#326569;text-decoration:none;}
body.ks-konto-skin .ks-konto-check a:hover{color:#253D54;}

/* Buttons */
body.ks-konto-skin .woocommerce-Button.button,
body.ks-konto-skin button[name="login"],
body.ks-konto-skin button[name="register"]{
	width:100%;padding:14px 18px;font-family:inherit;font-size:16px;letter-spacing:.4px;
	color:var(--ks-button-text, #fff) !important;background:#253D54;border:0;border-radius:10px;cursor:pointer;margin-top:4px;
	box-shadow:0 10px 22px -8px rgba(37,61,84,.5);transition:background-color .2s ease,box-shadow .2s ease;
}
body.ks-konto-skin .woocommerce-Button.button:hover,
body.ks-konto-skin button[name="login"]:hover,
body.ks-konto-skin button[name="register"]:hover{background:#326569;box-shadow:0 12px 26px -8px rgba(50,101,105,.5);}

/* Serverseitig gedruckte Meldungen (1.19.2). Sie stehen bereits an der richtigen
   Stelle in der Karte, brauchen also nur die Optik. Bewusst KEINE display-Regel,
   die sie verstecken koennte. */
body.ks-konto-skin .ks-konto-notices{margin:0 0 18px;}
body.ks-konto-skin .ks-konto-notices ul,
body.ks-konto-skin .ks-konto-notices li{list-style:none;margin:0;padding:0;}
body.ks-konto-skin .ks-konto-notices .woocommerce-error,
body.ks-konto-skin .ks-konto-notices .woocommerce-message,
body.ks-konto-skin .ks-konto-notices .woocommerce-info{
	margin:0 0 10px;padding:12px 15px;border-radius:10px;
	font-size:14px;line-height:1.45;box-shadow:none;
}
body.ks-konto-skin .ks-konto-notices .woocommerce-error::before,
body.ks-konto-skin .ks-konto-notices .woocommerce-message::before,
body.ks-konto-skin .ks-konto-notices .woocommerce-info::before{display:none;}
body.ks-konto-skin .ks-konto-notices .woocommerce-error{
	background:rgba(147,18,4,.07);border:1px solid rgba(147,18,4,.32);color:#931204;
}
body.ks-konto-skin .ks-konto-notices .woocommerce-message{
	background:rgba(50,101,105,.09);border:1px solid rgba(50,101,105,.32);color:#245055;
}
body.ks-konto-skin .ks-konto-notices .woocommerce-info{
	background:rgba(37,61,84,.07);border:1px solid rgba(37,61,84,.28);color:#253D54;
}

/* WooCommerce-Hinweise (Fehler/Erfolg) — per JS oben in die Karte gezogen (.ks-konto-notice) */
body.ks-konto-skin .ks-konto-card .ks-konto-notice{
	list-style:none;margin:0 0 18px;padding:12px 15px;border-radius:10px;
	font-size:14px;line-height:1.45;box-shadow:none;
}
body.ks-konto-skin .ks-konto-card .ks-konto-notice::before{display:none;} /* WC-Icon/Border-Marker weg */
body.ks-konto-skin .ks-konto-card .ks-konto-notice li{margin:0;padding:0;list-style:none;}
body.ks-konto-skin .ks-konto-card .ks-konto-notice a{color:inherit;text-decoration:underline;}
body.ks-konto-skin .ks-konto-card ul.woocommerce-error.ks-konto-notice{
	background:rgba(147,18,4,.07);border:1px solid rgba(147,18,4,.32);color:#931204;
}
body.ks-konto-skin .ks-konto-card .woocommerce-message.ks-konto-notice{
	background:rgba(50,101,105,.09);border:1px solid rgba(50,101,105,.32);color:#245055;
}
body.ks-konto-skin .ks-konto-card .woocommerce-info.ks-konto-notice{
	background:rgba(37,61,84,.07);border:1px solid rgba(37,61,84,.28);color:#253D54;
}
/* Fallback (falls JS blockiert ist): Hinweis nicht mehr links neben der Karte,
   sondern zentriert über die volle Breite. */
body.ks-konto-skin .woocommerce-error,
body.ks-konto-skin .woocommerce-message,
body.ks-konto-skin .woocommerce-info{border-radius:10px;font-size:14px;}

/* --- Einzelformulare: Passwort vergessen / zurücksetzen (Hero+Karte, keine Pille) --- */
/* Der Wrapper sitzt hier AUSSERHALB von .bsMyAccount → eigene Breitenbegrenzung. */
body.ks-konto-skin .ks-konto-wrap--single{width:100%;max-width:560px;margin:0 auto;}
body.ks-konto-skin .ks-konto-wrap--single .bsMyAccount{width:100%;max-width:none;margin:0;padding:0;background:none;}
/* schmalen 2-Spalten-Rechts-Float des Konto-Contents aufheben */
body.ks-konto-skin .ks-konto-wrap--single .woocommerce-MyAccount-content{width:100%;max-width:none;float:none;margin:0;padding:0;}
body.ks-konto-skin .ks-konto-wrap--single .wc-LostPassword,
body.ks-konto-skin .ks-konto-wrap--single .woocommerce-ResetPassword{width:100%;max-width:none;float:none;margin:0;}
/* Erklärtext */
body.ks-konto-skin .ks-konto-wrap--single .bs_woocommerce_reset_message,
body.ks-konto-skin .ks-konto-wrap--single .woocommerce-ResetPassword>p:first-of-type{
	font-size:15px;line-height:1.55;color:#5a6b78;margin:0 0 20px;text-align:center;
}
/* Labels zentriert (Einzelformular, Frank „felder zentrieren") */
body.ks-konto-skin .ks-konto-wrap--single label{
	display:block;font-size:13px;letter-spacing:.3px;color:#253D54;margin:0 0 6px;text-align:center;
}

/* Bestätigungsseite „E-Mail ist unterwegs" (Karte .ks-konto-card--msg) */
body.ks-konto-skin .ks-konto-card--msg p:not(.ks-konto-back){
	font-size:15px;line-height:1.6;color:#5a6b78;margin:0;text-align:center;
}
/* Notice-Optik in der Einzel-Karte (ohne JS-Abhängigkeit) */
body.ks-konto-skin .ks-konto-wrap--single .woocommerce-message,
body.ks-konto-skin .ks-konto-wrap--single .woocommerce-info,
body.ks-konto-skin .ks-konto-wrap--single .woocommerce-error{
	list-style:none;margin:0 0 16px;padding:12px 15px;border-radius:10px;font-size:14px;line-height:1.45;
	box-shadow:none;text-align:center;
}
body.ks-konto-skin .ks-konto-wrap--single .woocommerce-message::before,
body.ks-konto-skin .ks-konto-wrap--single .woocommerce-info::before,
body.ks-konto-skin .ks-konto-wrap--single .woocommerce-error::before{display:none;}
body.ks-konto-skin .ks-konto-wrap--single .woocommerce-message{background:rgba(50,101,105,.09);border:1px solid rgba(50,101,105,.32);color:#245055;}
body.ks-konto-skin .ks-konto-wrap--single .woocommerce-info{background:rgba(37,61,84,.07);border:1px solid rgba(37,61,84,.28);color:#253D54;}
body.ks-konto-skin .ks-konto-wrap--single .woocommerce-error{background:rgba(147,18,4,.07);border:1px solid rgba(147,18,4,.32);color:#931204;}
/* Zeilen full-width stapeln (WC setzt first/last sonst nebeneinander) */
body.ks-konto-skin .ks-konto-wrap--single .form-row,
body.ks-konto-skin .ks-konto-wrap--single .form-row-first,
body.ks-konto-skin .ks-konto-wrap--single .form-row-last{width:100%;max-width:none;float:none;margin:0 0 16px;}
body.ks-konto-skin .ks-konto-wrap--single .clear{display:none;}
/* „Zurück zur Anmeldung" */
body.ks-konto-skin .ks-konto-back{margin:18px 0 0;text-align:center;font-size:14px;}
body.ks-konto-skin .ks-konto-back a{color:#326569;text-decoration:none;}
body.ks-konto-skin .ks-konto-back a:hover{color:#253D54;text-decoration:underline;}

/* Touch-Ziele mindestens 44px (Frank 24.08.2026, Mobil-Ansage Punkt 2).
 * Die Pille hat mit `padding:11px 24px` und `line-height:1` nur rund 37px Höhe -
 * unter der Grenze, ab der ein Tippziel zuverlässig getroffen wird. */
@media (max-width:768px){
	body.ks-konto-skin .ks-konto-tab{min-height:44px;padding-block:12px;}
}

@media (max-width:480px){
	body.ks-konto-skin .ks-konto-hero{padding:36px 20px 88px;}
	body.ks-konto-skin .ks-konto-title{font-size:25px;}
	body.ks-konto-skin .ks-konto-intro{font-size:17px;}
	body.ks-konto-skin .ks-konto-card{padding:22px 20px 26px;}
}