/* =============================================================================
   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;
	/* `visibility:hidden` nimmt der Box ihren Platz NICHT. Die Blase stand also
	   auch ungesehen im Layout und konnte ueber den rechten Rand ragen — auf der
	   Registrierungsseite machte das die ganze Seite seitlich schiebbar, ohne dass
	   irgendetwas zu sehen war (Kili, 18.09.2026). `display:none` nimmt ihr den
	   Platz wirklich. Preis dafuer ist die 0,12-s-Ueberblendung: Ein Wechsel von
	   `display:none` laesst sich nicht ueberblenden, die Blase erscheint jetzt
	   hart. Das ist der Tausch wert — ein unsichtbarer Layoutfehler kostet mehr
	   als eine Animation. */
	display: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{ display:block; 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{ display:block; 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.

   NUR im zweispaltigen Raster: `g2` klappt ab 640px abwaerts auf eine Spalte um
   (Zeile 50), und dann steht das Info-Zeichen des ersten Feldes nicht mehr am
   linken Formularrand, sondern dort, wo das Label endet. `left:0` liess die Blase
   an dieser Zeichenkante beginnen und 260px nach rechts laufen: Bei „Telefon
   (Pflicht)" begann sie bei 150px und endete bei 410px — 35px ueber den Rand
   eines 375px-Schirms. `gplz` bleibt auch schmal zweispaltig (140px + 1fr) und
   behaelt die Regel deshalb. */
.psk-konto .psk-reg__gplz > .psk-reg__f:first-child .psk-reg__info-text{ left:0; transform:none }
.psk-konto .psk-reg__gplz > .psk-reg__f:first-child .psk-reg__info-text::after{ left:14px }
@media (min-width: 641px){
	.psk-konto .psk-reg__g2 > .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{ 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);
}

/* ==========================================================================
   Packstation in der Lieferadresse (Kili, 18.09.2026)

   Nur die Lieferadresse. In der Rechnungsadresse wird eine Packstation
   umgekehrt abgewiesen — das prueft der Server (SPF_Registrierung::validieren).
   ========================================================================== */

/* Der Haken steht direkt unter der Ueberschrift „Lieferadresse". Etwas Luft
   darunter, damit er sich vom Adressblock absetzt und nicht wie dessen erste
   Zeile gelesen wird. */
.psk-konto .psk-reg__pscheck{ margin-bottom: 2px; }

/* Strasse und Stationsnummer nebeneinander: die Strasse traegt das feste Wort
   „Packstation", die Nummer ist kurz. 1fr fuer die Strasse, feste Breite fuer
   die drei Ziffern — dieselbe Aufteilung wie bei PLZ und Ort, nur andersherum.

   ⚠️ minmax(0, 1fr) und nicht 1fr: Ein Grid-Element mit 1fr laeuft ueber, sobald
   sein Inhalt breiter ist als die Spalte — die Vorgabe von `min-width` ist
   `auto`, nicht 0. */
.psk-konto .psk-reg__gstr{ display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 14px; }

/* ⚠️ BEIDE REGELN SIND NOETIG, auch wenn `hidden` „eigentlich" reicht.
   Das HTML-Attribut `hidden` wirkt ueber `display:none` im Browser-Stylesheet —
   und verliert damit gegen JEDE eigene display-Regel. `.psk-reg__f` steht weiter
   oben in dieser Datei auf `display:flex`, das Nummernfeld waere also trotz
   `hidden` sichtbar geblieben. Die Falle ist im Projekt schon einmal
   aufgetreten. */
.psk-konto .psk-reg__f--ps-nur[hidden],
.psk-konto .psk-reg__ps-weg[hidden]{ display: none; }

/* ⚠️ UND DIESELBE FALLE EIN DRITTES MAL — hier ist sie am 18.09.2026 zugeschlagen.
   `psReihe()` setzt bei gesetztem Haken `info.hidden = true`, damit neben der
   Beschriftung nicht das „i" UND darunter derselbe Satz steht. Der Knopf traegt aber
   `display:inline-flex` (weiter oben in dieser Datei), und dagegen verliert `hidden`.
   Ergebnis auf Kilis Bildschirmfoto: „POSTNUMMER i *" mit dem Hinweistext direkt
   darunter — zweimal dasselbe.

   Merkposten fuer diese Datei: Jedes Element, das ein Skript per `hidden` verbirgt,
   braucht hier eine eigene `[hidden]`-Regel, solange es irgendwo ein `display` traegt. */
.psk-konto .psk-reg__info[hidden]{ display: none; }

/* Festgeschriebene Felder: Strasse und Land.

   ⚠️ Gedaempft, nicht unleserlich. Ein Feld, das man nicht mehr entziffern kann,
   ist keine Ausgrauung, sondern ein Fehler — der Kunde muss lesen koennen, was
   dort fuer ihn eingetragen wurde. Gemessen auf der hellen Karte (#fbfcfd):
   #454a50 auf #f1f3f5 ergibt 8,1:1, weit ueber den 4,5:1 nach WCAG AA. */
.psk-konto .psk-reg input.psk-reg__grau,
.psk-konto .psk-reg__select.psk-reg__grau{
  background: var(--hover, #f1f3f5);
  color: #454a50;
  cursor: default;
}
html.spf-night .psk-konto .psk-reg input.psk-reg__grau,
html.spf-night .psk-konto .psk-reg__select.psk-reg__grau{
  background: color-mix(in srgb, var(--card, #1b1d21) 70%, var(--ink, #e8eaed) 8%);
  color: var(--muted, #b6bcc4);
}
/* Der Fokusring muss trotzdem sichtbar bleiben: Mit der Tastatur kommt man auch
   durch ein readonly-Feld, und wer dann nicht sieht, wo er steht, ist verloren. */
.psk-konto .psk-reg input.psk-reg__grau:focus-visible{ outline: 2px solid var(--orange-text, var(--orange)); outline-offset: 2px; }

/* Der Packstation-Hinweis unter PLZ und Ort steht als sichtbare Zeile da, nicht
   als „i" — vor einem Fehler, der zur unzustellbaren Sendung fuehrt (die eigene
   PLZ statt der der Station), muss man warnen, ohne dass jemand erst zeigen oder
   klicken muss. Dieselbe Entscheidung wie an der Kasse.

   ⚠️ Die Farbe ist BEWUSST nicht die Fehlerfarbe. Der Satz warnt vor einem
   Bedienfehler, ist aber selbst keiner; als Dauerzustand unter zwei Feldern
   laese ihn jeder als Fehlermeldung. Rot bleibt der echten Pruefmeldung
   vorbehalten — derselbe Befund wie am 08.09.2026 an der Kasse. */
.psk-konto .psk-reg__pshinweis{ color: var(--muted, #5f6368); }

@media (max-width: 640px){
  /* Auf dem Telefon untereinander: 140 px fuer die Nummer neben einer Strasse
     lassen bei 390 px Breite fuer die Strasse zu wenig uebrig. */
  .psk-konto .psk-reg__gstr{ grid-template-columns: minmax(0, 1fr); }
}