/* =============================================================================
   Registrierung (?view=registrieren auf der Kontoseite)
   -----------------------------------------------------------------------------
   Umsetzung des Mockups „Konto-Mockups PowerShop" vom 18.08.2026. Lebt im
   Geltungsbereich der Kontoseite (.psk-konto) und nutzt deren Token: --orange
   ist dort bereits die Markenweiche (KTM Orange, Husky Blau), --card/--line/
   --ink/--muted tragen den Nachtmodus mit.

   Der Absende-Knopf kommt aus dem globalen Buttonsystem (.bso-btn) — hier steht
   bewusst KEINE Knopfgestalt.
   ============================================================================= */

.psk-konto .psk-reg{
  max-width: 720px; margin: 0 auto; padding: 28px;
  background: var(--card, #fff); border: 1px solid var(--line-strong, #dadde1);
  border-radius: var(--radius, 12px); box-shadow: var(--shadow, 0 1px 2px rgba(20,24,28,.04), 0 8px 28px rgba(20,24,28,.06));
}
.psk-konto .psk-reg__form{ display: flex; flex-direction: column; gap: 22px; }

/* --- Kundentyp-Umschalter ------------------------------------------------- */
.psk-konto .psk-reg__seg{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
  background: var(--hover, #f1f3f5); border-radius: 10px; padding: 5px;
}
.psk-konto .psk-reg__segbtn{
  height: 42px; border-radius: 8px; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--cond); font-weight: 600; font-size: 13.5px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.psk-konto .psk-reg__segbtn svg{ width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.psk-konto .psk-reg__segbtn.is-akt{
  background: var(--card, #fff); border: 1px solid var(--line-strong, #dadde1);
  box-shadow: 0 1px 3px rgba(20,24,28,.08); color: var(--ink, #16181c);
}
.psk-konto .psk-reg__segbtn.is-akt svg{ stroke: var(--orange-text, var(--orange)); }
/* Husqvarna schreibt aufrecht und normal — dieselbe Regel wie auf der ganzen
   Subsite, hier nur fuer die Teile, die das Markenblatt nicht selbst erfasst
   (spans und buttons; h3 normalisiert es ueber seine h-Selektoren). */
.psk-reg--husky .psk-reg__segbtn{ font-family: inherit; text-transform: none; letter-spacing: 0; }

/* --- Abschnitte und Raster ------------------------------------------------ */
.psk-konto .psk-reg__sect{
  margin: 6px 0 0; font-family: var(--cond); font-weight: 600; font-size: 13.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink, #16181c);
}
.psk-konto .psk-reg__stapel{ display: flex; flex-direction: column; gap: 14px; }
.psk-konto .psk-reg__g2{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.psk-konto .psk-reg__gplz{ display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; }
@media (max-width: 640px){
  .psk-konto .psk-reg__g2{ grid-template-columns: minmax(0, 1fr); }
  .psk-konto .psk-reg{ padding: 20px 16px; }
}

/* --- Felder ---------------------------------------------------------------
   Die .wcwrap-Regeln der Kontoseite gelten hier nicht (anderer Wrapper),
   deshalb eigene, gleich aussehende. */
.psk-konto .psk-reg__f{ display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.psk-konto .psk-reg__lbl{
  font-family: var(--cond); font-weight: 500; font-size: 12.5px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted, #5f6368);
}
.psk-reg--husky .psk-reg__lbl{ font-family: inherit; font-weight: 600; font-size: 11.5px; }
.psk-konto .psk-reg__stern{ color: var(--orange-text, var(--orange)); }
.psk-konto .psk-reg__opt{ text-transform: none; letter-spacing: 0; color: var(--faint, #9aa0a6); }
.psk-konto .psk-reg input:not([type="checkbox"]):not([type="file"]),
.psk-konto .psk-reg__select{
  height: 46px; width: 100%; border: 1px solid var(--border, #c6cad0);
  border-radius: 9px; background: var(--card, #fff); color: var(--ink, #16181c);
  padding: 0 13px; font-family: var(--sans); font-size: 15px;
}
.psk-konto .psk-reg input:focus,
.psk-konto .psk-reg__select:focus{
  outline: none; border-color: var(--orange-text, var(--orange));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange-text, var(--orange)) 18%, transparent);
}
html.spf-night .psk-konto .psk-reg input:focus,
html.spf-night .psk-konto .psk-reg__select:focus{
  border-color: var(--spf-brand-night, var(--orange-text, var(--orange)));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--spf-brand-night, var(--orange-text, var(--orange))) 22%, transparent);
}
/* iOS zoomt beim Antippen in ein Feld unter 16 px hinein. Mobil deshalb 16 px,
   Desktop bleibt bei 15 px. Die Feldhoehe ist mit 46 px fest gesetzt, das Feld
   springt also nicht. Breakpoint wie im Raster oben. */
@media (max-width: 640px){
  .psk-konto .psk-reg input:not([type="checkbox"]):not([type="file"]),
  .psk-konto .psk-reg__select{ font-size: 16px; }
}
.psk-konto .psk-reg__hilfe{ font-size: 12px; color: var(--faint, #9aa0a6); }

/* ---------- Feldhinweis als „i" (04.09.2026, Tobi) ----------
   Dieselbe Bauform wie an der Kasse. Der Hilfetext bleibt als `.psk-reg__hilfe` im
   Markup und wird vom Skript in die Sprechblase umgehaengt — ohne JavaScript steht
   er weiterhin als Zeile unter dem Feld. */
.psk-konto .psk-reg__info{
	display:inline-flex; align-items:center; justify-content:center;
	width:16px; height:16px; margin-left:6px; padding:0;
	border:1px solid var(--line, #d7d9dc); border-radius:999px;
	background:transparent; color:var(--faint, #6b7280);
	font-size:10.5px; font-weight:700; font-style:italic; line-height:1;
	cursor:help; position:relative; vertical-align:middle;
}
/* Zeigeflaeche auf 44 px, ohne dass das Symbol waechst oder das Label aufreisst. */
.psk-konto .psk-reg__info::after{
	content:""; position:absolute; top:50%; left:50%;
	width:44px; height:44px; transform:translate(-50%,-50%);
}
.psk-konto .psk-reg__info:focus-visible{ outline:2px solid var(--orange-text, var(--orange)); outline-offset:2px }

.psk-konto .psk-reg__info-text{
	position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
	z-index:20; width:max-content; max-width:min(260px,70vw);
	background:var(--ink, #16181c); color:#fff;
	border-radius:8px; padding:8px 10px;
	font-size:12.5px; font-weight:400; font-style:normal; line-height:1.4;
	text-align:left; white-space:normal;
	opacity:0; visibility:hidden; transition:opacity .12s ease; pointer-events:none;
}
.psk-konto .psk-reg__info-text::after{
	content:""; position:absolute; top:100%; left:50%; margin-left:-5px;
	border:5px solid transparent; border-top-color:var(--ink, #16181c);
}
/* Fokus zeigt IMMER — der Tastatur- und Touchweg. */
.psk-konto .psk-reg__info:focus .psk-reg__info-text,
.psk-konto .psk-reg__info:focus-visible .psk-reg__info-text{ opacity:1; visibility:visible }
/* Zeigen nur, wo es das gibt: Ohne diese Kapselung bleibt die Blase auf Touch haengen. */
@media (hover:hover){
	.psk-konto .psk-reg__info:hover .psk-reg__info-text{ opacity:1; visibility:visible }
}
@media (prefers-reduced-motion:reduce){
	.psk-konto .psk-reg__info-text{ transition:none }
}
/* Am linken Rand des Rasters liefe die Blase sonst aus dem Formular. */
.psk-konto .psk-reg__g2 > .psk-reg__f:first-child .psk-reg__info-text,
.psk-konto .psk-reg__gplz > .psk-reg__f:first-child .psk-reg__info-text{ left:0; transform:none }
.psk-konto .psk-reg__g2 > .psk-reg__f:first-child .psk-reg__info-text::after,
.psk-konto .psk-reg__gplz > .psk-reg__f:first-child .psk-reg__info-text::after{ left:14px }

/* --- USt-IdNr. mit Pruefzustand ------------------------------------------- */
.psk-konto .psk-reg__vatwrap{ position: relative; }
.psk-konto .psk-reg__vatwrap input{ padding-right: 42px; }
.psk-konto .psk-reg__vatok{
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; fill: none; stroke: #127a3d; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; display: none;
}
.psk-konto #spf-vat-feld.is-ok input{ border-color: #7dbf94; }
.psk-konto #spf-vat-feld.is-ok .psk-reg__vatok{ display: block; }
.psk-konto #spf-vat-feld.is-warn input{ border-color: #d7a439; }
.psk-konto #spf-vat-feld.is-warn .psk-reg__vatmeldung{ color: #8a6210; }
.psk-konto #spf-vat-feld.is-fehler input{ border-color: #c5595f; }
.psk-konto #spf-vat-feld.is-fehler .psk-reg__vatmeldung{ color: #b3261e; }

/* --- Typ-abhaengige Bloecke ----------------------------------------------- */
.psk-reg[data-typ="privat"] .psk-reg__nur-haendler,
.psk-reg[data-typ="privat"] .psk-reg__nur-haendler-feld{ display: none; }
.psk-reg[data-typ="haendler"] .psk-reg__nur-privat{ display: none; }
.psk-konto .psk-reg__nur-haendler{ display: flex; flex-direction: column; gap: 12px; }
/* Firmenname und Telefon stehen bei beiden Typen und tragen BEIDE
   Beschriftungen im Markup — hier faellt die weg, die gerade nicht gilt.
   So braucht die Umschaltung kein Skript und stimmt auch ohne JavaScript. */
.psk-reg[data-typ="privat"] .psk-reg__f--hpflicht .psk-reg__stern{ display: none; }
.psk-reg[data-typ="haendler"] .psk-reg__f--hpflicht .psk-reg__opt{ display: none; }

/* --- Checkboxen (Identisch + Einwilligung) --------------------------------- */
.psk-konto .psk-reg__check{
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  font-size: 13.5px; color: var(--ink, #16181c); line-height: 1.5;
}
.psk-konto .psk-reg__check input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.psk-konto .psk-reg__box{
  width: 18px; height: 18px; flex: none; margin-top: 1px;
  border: 1.5px solid var(--border, #c6cad0); border-radius: 4px; background: var(--card, #fff);
  display: flex; align-items: center; justify-content: center;
}
.psk-konto .psk-reg__box svg{ width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; display: none; }
.psk-konto .psk-reg__check input:checked + .psk-reg__box{ background: var(--orange); border-color: var(--orange); }
.psk-konto .psk-reg__check input:checked + .psk-reg__box svg{ display: block; }
.psk-konto .psk-reg__check input:focus-visible + .psk-reg__box{
  outline: 2px solid var(--orange-text, var(--orange)); outline-offset: 2px;
}
.psk-konto .psk-reg__einwilligungen{
  display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid var(--line, #e5e7ea); padding-top: 20px;
}

/* --- Lieferadresse (aufklappbar) ------------------------------------------ */
.psk-konto .psk-reg__lief{ display: flex; flex-direction: column; gap: 12px; }
.psk-konto .psk-reg__lief[hidden]{ display: none; }

/* --- Upload ---------------------------------------------------------------- */
.psk-konto .psk-reg__upload{
  border: 1.5px dashed var(--border, #c6cad0); border-radius: 9px;
  background: var(--hover, #fbfcfd); padding: 15px 16px; cursor: pointer;
  display: flex; align-items: center; gap: 13px;
}
@media (hover: hover){
.psk-konto .psk-reg__upload:hover{ border-color: var(--orange-text, var(--orange)); }}
.psk-konto .psk-reg__upload input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.psk-konto .psk-reg__upload > svg{ width: 22px; height: 22px; fill: none; stroke: var(--orange-text, var(--orange)); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.psk-konto .psk-reg__uptext{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.psk-konto .psk-reg__uptext strong{ font-size: 14px; color: var(--ink, #16181c); overflow-wrap: anywhere; }
.psk-konto .psk-reg__uptext span{ font-size: 12.5px; color: var(--muted, #5f6368); }
.psk-konto .psk-reg__upload.hat-datei{ border-style: solid; border-color: #7dbf94; }

/* --- Fehlerliste von WooCommerce ------------------------------------------- */
.psk-konto .psk-reg ~ .woocommerce-error,
.psk-konto ul.woocommerce-error{
  max-width: 720px; margin: 0 auto 16px; list-style: none;
  background: var(--hover, #f7f8f9); border: 1px solid var(--line, #e5e7ea);
  border-left: 3px solid #b3261e; border-radius: 9px; padding: 12px 15px;
  font-size: 13.5px; color: var(--ink, #16181c);
}