/* ============================================================================= SPF Kontoseite — Gestalt Herkunft: das Bricks-Code-Element der Seite „Mein Konto NEU". Grundlage ist die HUSKY-Fassung, weil dort die Marken-Tokens schon eingebaut waren; KTM lief noch mit festem Orange und festem „Blender Pro". Die Rueckfallwerte zeigen jetzt auf KTM, weil das die Vorgabe der Palette ist — Husky ueberschreibt sie ohnehin ueber `--brand-accent`. Die lokalen Namen `--orange*` bleiben: sie stehen an ueber 200 Stellen und sind nur noch Zeiger auf die Markenfarbe. ============================================================================= */ .psk-konto{ /* HUSKY: die drei Markenwerte kommen aus Snippet 5462 (Marken-Tokens). Die lokalen Namen --orange* bleiben, damit die 200+ Verwendungen darunter unveraendert bleiben — es sind jetzt nur Zeiger. */ --orange:var(--brand-accent,#ff6600); /* ROLLENTRENNUNG (11.09.2026) `--orange` traegt FLAECHEN (Avatar, Zaehlerpille, Versand-Badge, Knopffuellung) — darauf steht eine eigene Schriftfarbe. Der Token darf nachts NICHT umgehaengt werden, sonst stuende auf Husqvarna Weiss auf Signalgelb. `--orange-text` traegt SCHRIFT, KANTEN, Icons und die schmalen Markierungsbalken. Nur er wird im Nachtblock auf die Signatur gelegt. Gilt ueber den Container `.psk-konto` auch fuer spf-konto-bestellung.css, spf-registrierung.css, spf-adressbuch.css und spf-konto-guthaben.css — die definieren `--orange` nicht selbst. */ --orange-text:var(--orange); --orange-press:var(--brand-accent-dark,#e25c00); --orange-soft:var(--brand-accent-soft,color-mix(in srgb, var(--brand-accent,#ff6600) 10%, transparent)); --ink:#16181c; --muted:#6b7280; --faint:#6c737b; --line:#ececec; --line-strong:#e0e1e3; --border:#d7d9dc; --card:#ffffff; --hover:#f7f8f9; /* `--faint` und `--out` am 04.09.2026 abgedunkelt (Kili, Farbenfix Kontobereich). Gerechnet gegen den SCHWIERIGEREN der beiden hellen Gruende: die Karte #f7f8f9, nicht Weiss. Vorher: --faint #9aa0a6 = 2,64:1 auf Weiss (traegt „Kunde seit …", „Bereich" und die Zaehler), --out #e0453c = 4,13:1 (der Abmelden-Eintrag). Jetzt beide 4,80 auf Weiss und 4,51 auf der Karte. */ --ok:#22a447; --ok-soft:rgba(34,164,71,.1); --warn:#f0a726; --warn-soft:rgba(240,167,38,.12); --out:#da2d23; --draw-stroke:#c2c6cc; --draw-stroke-strong:#8b9098; --draw-fill:#fafbfc; --radius:12px; --shadow:0 1px 2px rgba(20,24,28,.04),0 8px 28px rgba(20,24,28,.06); /* HUSKY: Blender Pro ist auf Husqvarna nicht zulaessig (CI 2). */ --sans:var(--spf-brand-sans,var(--brand-font-body,'Helvetica Neue',Helvetica,Arial,sans-serif)); --cond:var(--spf-brand-cond,var(--brand-font-cond,'Helvetica Neue',Helvetica,Arial,sans-serif)); --mono:var(--spf-brand-sans,var(--brand-font-cond,'Helvetica Neue',Helvetica,Arial,sans-serif)); max-width:1320px; margin-left:auto; margin-right:auto; padding-top:26px; padding-bottom:56px; font-family:var(--sans); color:var(--ink); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; } .psk-konto *{box-sizing:border-box} .psk-konto .crumbs{font-size:12.5px;color:var(--faint);margin:0 0 10px;display:flex;gap:7px;align-items:center;flex-wrap:wrap} .psk-konto .crumbs a{color:var(--muted);text-decoration:none} @media (hover:hover){ .psk-konto .crumbs a:hover{color:var(--orange-text)}} .psk-konto .crumbs svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2} .psk-konto .page-title{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:30px;margin:2px 0 18px;line-height:1.1;color:var(--ink)} @media (max-width:767px){.psk-konto .page-title{font-size:24px;margin:2px 0 14px}} @media (max-width:478px){.psk-konto .page-title{font-size:21px}} .psk-konto .acct{display:grid;grid-template-columns:280px minmax(0,1fr);gap:26px;align-items:start} .psk-konto .acct>*{min-width:0} @media (max-width:991px){.psk-konto .acct{grid-template-columns:236px minmax(0,1fr);gap:18px}} @media (max-width:767px){.psk-konto .acct{grid-template-columns:minmax(0,1fr);gap:14px}} .psk-konto .side{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px} .psk-konto .usercard{background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 18px 16px} .psk-konto .usercard .urow{display:flex;align-items:center;gap:13px} .psk-konto .avatar{width:52px;height:52px;flex:none;border-radius:50%;background:var(--orange);color:var(--spf-brand-ink-auto,#101112);display:flex;align-items:center;justify-content:center;font-family:var(--cond);font-weight:700;font-size:20px;letter-spacing:.02em} .psk-konto .usercard .who{min-width:0} .psk-konto .usercard .nm{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.02em;font-size:17px;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)} .psk-konto .usercard .em{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .psk-konto .usercard .since{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--faint);display:flex;align-items:center;gap:7px} .psk-konto .usercard .since svg{width:14px;height:14px;stroke:var(--orange-text);fill:none;stroke-width:1.8;flex:none} .psk-konto .navcard{background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden} .psk-konto .nav{display:flex;flex-direction:column;padding:6px} .psk-konto .nav a{display:flex;align-items:center;gap:12px;width:100%;text-align:left;text-decoration:none;border:0;background:none;padding:11px 12px;border-radius:9px;cursor:pointer;font-family:var(--sans);font-size:14px;color:var(--ink);position:relative;transition:background .18s,color .18s;min-height:44px} .psk-konto .nav a .nic{width:20px;height:20px;flex:none;color:var(--faint);display:flex;align-items:center;justify-content:center;transition:color .18s} .psk-konto .nav a .nic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7} .psk-konto .nav a .nlbl{flex:1;font-weight:500} .psk-konto .nav a .cnt{font-family:var(--mono);font-size:11px;color:var(--faint);background:var(--hover);border:1px solid var(--line);border-radius:20px;padding:2px 8px;transition:all .18s} @media (hover:hover){ .psk-konto .nav a:hover{background:var(--hover);color:var(--ink)}} @media (hover:hover){ .psk-konto .nav a:hover .nic{color:var(--orange-text)}} /* Flaeche entfallen 02.09.2026 (Kili): Die Zeile darunter setzt schon einen 3-px-Balken an die Kante — der markiert den Reiter allein. */ .psk-konto .nav a.active{color:var(--ink);font-weight:600} .psk-konto .nav a.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--orange-text);border-radius:0 3px 3px 0} .psk-konto .nav a.active .nic{color:var(--orange-text)} .psk-konto .nav a.active .nlbl{font-weight:600} .psk-konto .nav a.active .cnt{background:var(--orange);border-color:var(--orange);color:#fff} .psk-konto .nav .sep{height:1px;background:var(--line);margin:6px 8px} .psk-konto .nav a.logout{color:var(--out)} .psk-konto .nav a.logout .nic{color:var(--out)} @media (hover:hover){ .psk-konto .nav a.logout:hover{background:rgba(224,69,60,.07);color:var(--out)}} .psk-konto .nav-toggle{display:none} @media (max-width:767px){ .psk-konto .side{position:static;gap:12px} .psk-konto .usercard{padding:14px} .psk-konto .navcard{position:sticky;top:8px;z-index:45;box-shadow:0 4px 16px rgba(20,24,28,.09)} .psk-konto .nav-toggle{display:flex;width:100%;align-items:center;gap:11px;border:0;background:none;padding:11px 14px;cursor:pointer;font-family:var(--sans);text-align:left;min-height:56px} .psk-konto .nav-toggle .tic{width:36px;height:36px;flex:none;border-radius:10px;background:var(--orange);color:var(--spf-brand-ink-auto,#101112);display:flex;align-items:center;justify-content:center} .psk-konto .nav-toggle .tic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8} .psk-konto .nav-toggle .tmain{flex:1;min-width:0} .psk-konto .nav-toggle .tlbl{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--faint)} .psk-konto .nav-toggle .tval{display:block;font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.02em;font-size:15.5px;line-height:1.2;color:var(--ink)} .psk-konto .nav-toggle .thint{flex:none;font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:10.5px;color:var(--spf-brand-text,var(--orange-text));display:inline-flex;align-items:center;gap:5px} .psk-konto .nav-toggle .chev{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .2s} .psk-konto .navcard.open .nav-toggle .chev{transform:rotate(180deg)} .psk-konto .nav{display:none;border-top:1px solid var(--line)} .psk-konto .navcard.open .nav{display:flex} } @media (max-width:478px){.psk-konto .usercard .nm{font-size:16px}.psk-konto .nav-toggle{min-height:52px;padding:10px 12px}.psk-konto .nav-toggle .tval{font-size:14.5px}} .psk-konto .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 22px} @media (max-width:520px){.psk-konto .stats{grid-template-columns:1fr;gap:10px}} .psk-konto .stat{position:relative;display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 38px 14px 16px;cursor:pointer;text-align:left;text-decoration:none;color:var(--ink);overflow:hidden;transition:transform .2s,box-shadow .22s,border-color .18s;min-height:70px} @media (hover:hover){ .psk-konto .stat:hover{transform:translateY(-2px);border-color:var(--border);box-shadow:0 2px 4px rgba(20,24,28,.05),0 12px 30px rgba(20,24,28,.08)}} .psk-konto .stat .si{width:38px;height:38px;flex:none;border-radius:10px;background:var(--orange);color:var(--spf-brand-ink-auto,#101112);display:flex;align-items:center;justify-content:center} .psk-konto .stat .si svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8} .psk-konto .stat .snum{flex:none;font-family:var(--cond);font-weight:700;font-size:26px;line-height:1;font-variant-numeric:tabular-nums} .psk-konto .stat .slbl{flex:1;min-width:0;font-size:13px;color:var(--muted);line-height:1.25} .psk-konto .stat .sarrow{position:absolute;top:50%;margin-top:-9px;right:12px;color:var(--faint);opacity:0;transform:translateX(-4px);transition:all .2s} .psk-konto .stat .sarrow svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2} @media (hover:hover){ .psk-konto .stat:hover .sarrow{opacity:1;transform:none;color:var(--orange-text)}} /* Auf Touch bleibt der Pfeil sonst unsichtbar und die Kachel sieht aus wie eine reine Anzeige — sie ist aber ein Link. Gedaempft und in Grundfarbe: Er soll die Klickbarkeit zeigen, nicht die Zahl daneben ueberstrahlen. */ @media (hover:none){ .psk-konto .stat .sarrow{opacity:.5;transform:none} } .psk-konto .stat.nolink{cursor:default;padding-right:16px} @media (hover:hover){ .psk-konto .stat.nolink:hover{transform:none;border-color:var(--line-strong);box-shadow:var(--shadow)}} .psk-konto .stat.nolink .snum{font-size:20px} .psk-konto .sec{background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow);margin:0 0 18px;overflow:hidden} .psk-konto .sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line)} .psk-konto .sec-head .st{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:16px;display:flex;align-items:center;gap:9px;color:var(--ink)} .psk-konto .sec-head .st svg{width:19px;height:19px;stroke:var(--orange-text);fill:none;stroke-width:1.8;flex:none} .psk-konto .link{border:0;background:none;color:var(--orange-text);font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:6px 4px;text-decoration:none} .psk-konto .link svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2} @media (hover:hover){ .psk-konto .link:hover{color:var(--orange-press)}} .psk-konto .garage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:16px 18px} @media (max-width:1100px){.psk-konto .garage{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:520px){.psk-konto .garage{grid-template-columns:1fr}} .psk-konto .veh{position:relative;border:1px solid var(--line-strong);border-radius:11px;padding:14px;background:var(--card);transition:transform .2s,box-shadow .22s,border-color .18s} @media (hover:hover){ .psk-konto .veh:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--border)}} .psk-konto .veh.activeveh{border-color:var(--orange-text);box-shadow:0 0 0 3px var(--orange-soft)} .psk-konto .veh .vbadge{position:absolute;top:11px;right:11px;background:var(--ok-soft);color:var(--ok);border:1px solid rgba(34,164,71,.3);font-family:var(--cond);font-weight:600;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:6px;z-index:2} .psk-konto .veh .vimg{height:104px;display:flex;align-items:center;justify-content:center;margin:2px 0 10px;background:#fff;border-radius:9px;overflow:hidden} .psk-konto .veh .vimg img{max-width:100%;max-height:100%;object-fit:contain;display:block} .psk-konto .veh .vsil{height:104px;display:flex;align-items:center;justify-content:center;color:var(--draw-stroke-strong);margin:2px 0 10px} .psk-konto .veh .vsil svg{width:150px;height:76px;stroke:currentColor;fill:none;stroke-width:2} .psk-konto .veh .vnm{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.02em;font-size:15px;line-height:1.15;color:var(--ink)} .psk-konto .veh .vmeta{font-size:12px;color:var(--muted);margin-top:3px} .psk-konto .veh .vmeta code{font-family:var(--mono);font-size:11px;color:var(--ink)} .psk-konto .veh .vact{display:flex;gap:8px;margin-top:12px} .psk-konto .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:9px;font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:12.5px;cursor:pointer;border:1px solid var(--border);background:#fff;color:var(--ink);text-decoration:none;transition:all .18s} .psk-konto .btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;flex:none} @media (hover:hover){ .psk-konto .btn:hover{border-color:var(--orange-text);color:var(--orange-text)}} /* Flaeche, Schrift und Hover stehen im Buttonsystem. Hier bleibt nur, was Layout ist: der Knopf teilt sich die Zeile mit dem Ghost-Knopf daneben. */ .psk-konto .btn.primary{flex:1} .psk-konto .btn.ghost{flex:none} .psk-konto .garage-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1.5px dashed var(--border);border-radius:11px;color:var(--muted);font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:13px;cursor:pointer;background:none;min-height:180px;padding:20px;transition:all .18s;text-decoration:none} @media (hover:hover){ .psk-konto .garage-add:hover{border-color:var(--orange-text);color:var(--orange-text);background:var(--hover)}} .psk-konto .garage-add svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2} .psk-konto .orders{padding:6px 0} .psk-konto .order{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .16s;text-decoration:none;color:var(--ink)} .psk-konto .order:last-child{border-bottom:0} @media (hover:hover){ .psk-konto .order:hover{background:var(--hover)}} .psk-konto .order .oico{width:42px;height:42px;flex:none;border-radius:10px;background:var(--hover);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted)} .psk-konto .order .oico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7} .psk-konto .order .omain{min-width:0} /* Beide als eigene Zeile. Standen auf `inline`, obwohl `.ometa` einen `margin-top` traegt — der wirkt an einem Inline-Element nicht, und Bestellnummer und Datum klebten aneinander („#27948806.08.2026"). Faellt nicht am Theme-Wechsel an, war vorher genauso. */ .psk-konto .order .onr{display:block;font-family:var(--mono);font-size:13px;font-weight:500;color:var(--ink)} .psk-konto .order .ometa{display:block;font-size:12.5px;color:var(--muted);margin-top:2px} .psk-konto .order .oright{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px} .psk-konto .order .ott{font-family:var(--cond);font-weight:600;font-size:16px;font-variant-numeric:tabular-nums} .psk-konto .badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap;font-family:var(--sans)} .psk-konto .badge svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.6;flex:none} .psk-konto .badge.ok{background:var(--ok-soft);color:var(--ok)} .psk-konto .badge.ship{background:var(--orange);color:var(--spf-brand-ink-auto,#101112)} .psk-konto .badge.work{background:var(--warn-soft);color:#b9791a} .psk-konto .badge.out{background:rgba(224,69,60,.1);color:var(--out)} .psk-konto .empty{padding:26px 18px;color:var(--muted);font-size:13.5px;text-align:center} @media (max-width:560px){ .psk-konto .order{grid-template-columns:auto 1fr;gap:12px} .psk-konto .order .oico{display:none} .psk-konto .order .oright{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center;width:100%;margin-top:2px;padding-top:10px;border-top:1px dashed var(--line)} } .psk-konto .panel{animation:pskFade .26s cubic-bezier(.22,.61,.36,1)} @keyframes pskFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* Garage-Icon aus dem Drawer (32er-viewBox) etwas kräftiger */ .psk-konto .sec-head .st svg.gicon{stroke-width:2.4} /* WooCommerce-Endpoint-Inhalte on-brand */ .psk-konto .wcwrap{padding:20px 22px;font-size:14px} .psk-konto .wcwrap a{color:var(--orange-text);text-decoration:none} @media (hover:hover){ .psk-konto .wcwrap a:hover{text-decoration:underline}} .psk-konto .wcwrap table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 14px} .psk-konto .wcwrap th,.psk-konto .wcwrap td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle} .psk-konto .wcwrap th{font-family:var(--cond);text-transform:uppercase;letter-spacing:.03em;font-size:12.5px;color:var(--muted)} /* Ueberschriften in den WooCommerce-Inhalten (23.09.2026). Bis hierher waren sie ungestylt und kamen in der Browser-Vorgabe: serifenlos, 32 px, mit einem halben Zeilenabstand Luft darueber und darunter. Neben den 12,5-px-Tabellenkoepfen darunter sah das aus wie ein Fehler. Anlass war die Ueberschrift ueber den Altbestellungen, die seit heute unter der regulaeren Bestellliste steht (bso-archiv). Die Regel gilt aber bewusst fuer ALLE Ueberschriften im Endpunkt-Inhalt — WooCommerce setzt sie auch auf der Adressseite („Rechnungsadresse", „Lieferadresse") und bei den Bestelldetails, und dort war dasselbe Bild. Die Gestalt ist von `.sec-head .st` abgenommen, damit eine Ueberschrift im Endpunkt-Inhalt wie eine Abschnittsueberschrift der Kontoseite aussieht und nicht wie ein Fremdkoerper. Kein Rand nach oben beim ERSTEN Kind: Der `.wcwrap` bringt seine 20 px Polster schon mit. */ .psk-konto .wcwrap h2, .psk-konto .wcwrap h3{ font-family:var(--cond);text-transform:uppercase;letter-spacing:.03em; font-size:15px;line-height:1.25;font-weight:700; margin:22px 0 12px;padding:0 0 9px;border-bottom:1px solid var(--line); } .psk-konto .wcwrap > :first-child{margin-top:0} /* Die Knoepfe kommen aus dem globalen Buttonsystem (spf-buttons.css) — dort sind die `.psk-konto`-Selektoren seit dem 18.08.2026 aufgefuehrt. Hier stand bis dahin eine Nachbildung: 9 px rund statt 10, eigener Hover ohne Glanzwischer, kein Fokusring des Systems. Sie ist entfernt, weil dieses Blatt NACH spf-buttons.css laedt und bei gleicher Spezifitaet gewonnen haette. `text-decoration:none` bleibt: Die Regel `.psk-konto .wcwrap a:hover` weiter oben unterstreicht sonst auch Knoepfe, die als ausgegeben werden. */ .psk-konto .wcwrap .button, .psk-konto .wcwrap button, .psk-konto .wcwrap input[type=submit]{ text-decoration:none } @media (hover:hover){ .psk-konto .wcwrap .button:hover, .psk-konto .wcwrap button:hover, .psk-konto .wcwrap input[type=submit]:hover{ text-decoration:none }} .psk-konto .wcwrap input:not([type=checkbox]):not([type=radio]):not([type=submit]),.psk-konto .wcwrap select,.psk-konto .wcwrap textarea{width:100%;max-width:340px;border:1px solid var(--border);border-radius:9px;padding:9px 11px;font-family:var(--sans);font-size:14px;line-height:1.3;background:#fff} .psk-konto .wcwrap h2,.psk-konto .wcwrap h3,.psk-konto .wcwrap legend{font-family:var(--cond);text-transform:uppercase;letter-spacing:.02em;font-weight:600;color:var(--ink)} .psk-konto .wcwrap .woocommerce-Message,.psk-konto .wcwrap .woocommerce-info,.psk-konto .wcwrap .woocommerce-notice,.psk-konto .wcwrap .woocommerce-error{background:var(--hover);border:1px solid var(--line);border-left:3px solid var(--orange-text);border-radius:9px;padding:12px 14px;margin:0 0 14px;font-size:13.5px;list-style:none} .psk-konto .wcwrap--login{max-width:660px;margin:0 auto} /* ============================================================================= Anmeldung (Gast) Vorher: der nackte WooCommerce-Shortcode, auf Husky zusaetzlich eine eigene Bricks-Seite `/login/` mit sechs ungestylten Elementen. Beides ist weg; die Anmeldung traegt jetzt dieselbe Sprache wie das Konto dahinter. Die Formularfelder selbst kommen von WooCommerce — deshalb sind die Selektoren hier auf `.wcwrap--login` gescopt und fassen nichts an, was ausserhalb liegt. ============================================================================= */ .psk-konto .loginwrap{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:18px; align-items:start; max-width:980px; margin:0 auto; } @media (max-width:860px){ .psk-konto .loginwrap{ grid-template-columns:1fr; } } .psk-konto .logincard{ padding:0; overflow:hidden; } .psk-konto .logincard__head{ padding:22px 24px 4px; } .psk-konto .logincard__t{ font-family:var(--cond); text-transform:uppercase; letter-spacing:.03em; font-size:19px; color:var(--ink); line-height:1.15; position:relative; padding-bottom:11px; } /* Signaturkante wie ueberall sonst: 48 px unter der Zeile. */ .psk-konto .logincard__t::before{ content:""; position:absolute; left:0; bottom:0; width:48px; height:3px; background:var(--orange); } .psk-konto .logincard__sub{ margin:12px 0 0; font-size:14px; color:var(--muted); line-height:1.5; } /* WooCommerce-Formular im Rahmen ------------------------------------------- */ .psk-konto .wcwrap--login{ max-width:none; margin:0; padding:18px 24px 24px; } .psk-konto .wcwrap--login h2{ display:none; } /* „Anmelden" steht schon oben */ .psk-konto .wcwrap--login form.login{ border:0; padding:0; margin:0; border-radius:0; } /* Irgendwo im Shop steht `text-align:center` am WooCommerce-Formular. Ein Anmeldeformular mit zentrierten Beschriftungen und zentrierter Eingabe liest sich falsch — hier wieder linksbuendig. */ .psk-konto .wcwrap--login form, .psk-konto .wcwrap--login .form-row, .psk-konto .wcwrap--login .woocommerce-form-row{ text-align:left; } .psk-konto .wcwrap--login input{ text-align:left; } .psk-konto .wcwrap--login .form-row{ margin:0 0 14px; padding:0; display:block; } /* Das Formular „Passwort vergessen" bringt `form-row-first` mit. WooCommerce gibt dieser Klasse 47 % Breite und float:left — gedacht fuer zwei Felder nebeneinander. Hier steht nur eines, und eine E-Mail-Adresse in einem halb so breiten Feld ist mobil nicht mehr lesbar. Also dieselbe Breite wie in der Anmeldung (16.09.2026). */ .psk-konto .wcwrap--login .form-row-first, .psk-konto .wcwrap--login .form-row-last{ width:100%; float:none; } .psk-konto .wcwrap--login label{ display:block; margin:0 0 6px; font-family:var(--cond); text-transform:uppercase; letter-spacing:.03em; font-size:12.5px; color:var(--muted); } .psk-konto .wcwrap--login input:not([type=checkbox]):not([type=radio]):not([type=submit]){ max-width:none; height:46px; font-size:15px; } .psk-konto .wcwrap--login input:focus{ outline:none; border-color:var(--orange-text); box-shadow:0 0 0 3px color-mix(in srgb, var(--orange-text) 18%, transparent); } /* iOS zoomt beim Antippen in jedes Feld unter 16 px hinein und kommt danach nicht von selbst zurueck. Deshalb mobil 16 px — Desktop bleibt bei 14 px (.wcwrap) bzw. 15 px (Anmeldung). Die Selektoren sind mit denen der Basisregeln zeichengleich, sonst gewinnen deren :not()-Ketten. Der Block steht bewusst NACH der Anmeldungs-Regel, weil beide gleich spezifisch sind und sonst die Reihenfolge entscheidet. */ @media (max-width:767px){ .psk-konto .wcwrap input:not([type=checkbox]):not([type=radio]):not([type=submit]), .psk-konto .wcwrap select, .psk-konto .wcwrap textarea{ font-size:16px } .psk-konto .wcwrap--login input:not([type=checkbox]):not([type=radio]):not([type=submit]){ font-size:16px } } .psk-konto .wcwrap--login .button, .psk-konto .wcwrap--login button[type=submit]{ /* Kein `border-radius` mehr — der kommt aus dem Buttonsystem (10 px), und die Schraegform fuer KTM haengt an `.spf-form-schraeg` weiter unten. Breite und Hoehe bleiben hier: Das ist Layout dieser Seite, nicht Knopfgestalt. */ width:100%; height:50px; font-size:14.5px; } .psk-konto .wcwrap--login .woocommerce-form-login__rememberme{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted); margin:0 0 14px; } .psk-konto .wcwrap--login .woocommerce-form-login__rememberme span{ font-weight:400; } .psk-konto .wcwrap--login .lost_password{ margin:12px 0 0; font-size:13.5px; } /* „Noch kein Konto?" unter dem Anmeldeformular. Steht abgesetzt ueber einer Trennlinie, damit es nicht als Teil des Formulars gelesen wird — der Blick soll erst beim Knopf ankommen und danach hier. */ .psk-konto .loginmehr{ margin:18px 0 0; padding:16px 0 0; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; font-size:14px; color:var(--muted); } .psk-konto .loginmehr__t{ color:var(--ink); font-weight:600; } .psk-konto .loginmehr__link{ color:var(--orange-text); font-weight:600; text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--orange-text) 45%, transparent); } @media (hover:hover){ .psk-konto .loginmehr__link:hover{ border-bottom-color:var(--orange-text); }} .psk-konto .loginmehr__hint{ flex:1 1 100%; font-size:13.5px; } /* Registrieren-Ansicht: Brotkrumen, Titel und Karte in einer Flucht. Die Breite ist dieselbe wie die der Karte — die zentriert sich sonst allein, waehrend die Ueberschrift am Seitenrand haengen bleibt. */ .psk-konto .psk-regwrap{ max-width:720px; margin:0 auto; } html.spf-night .psk-konto .loginmehr__link{ color:var(--orange-text); border-bottom-color:color-mix(in srgb, var(--orange-text) 45%, transparent); } /* Zweispaltig, wenn WooCommerce Anmeldung UND Registrierung ausgibt. */ .psk-konto .wcwrap--login .u-columns.col2-set{ display:grid; grid-template-columns:1fr 1fr; gap:22px; } /* WooCommerce haengt an `.u-columns` einen Clearfix aus `::before`/`::after`. Im Float-Layout ist das unsichtbar — in einem Grid werden beide zu eigenen Zellen: Das `::before` belegt Spalte 1, die Anmeldung rutscht in Spalte 2 und die Registrierung in die naechste Zeile. Gemessen am 18.08.2026: Anmeldung bei x=652, Registrierung bei x=389 und 310 px tiefer — die beiden Formulare standen versetzt untereinander statt nebeneinander. */ .psk-konto .wcwrap--login .u-columns.col2-set::before, .psk-konto .wcwrap--login .u-columns.col2-set::after{ display:none; } /* Ueberschriften der beiden Spalten („Anmelden" / „Registrieren") tragen die Seitensprache. `h2` ist weiter oben ausgeblendet, weil die Anmeldung allein ihre Ueberschrift schon oben stehen hat — sobald ZWEI Spalten da sind, braucht jede wieder eine. */ .psk-konto .wcwrap--login .u-columns.col2-set h2{ display:block; margin:0 0 12px; font-family:var(--cond); font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:15px; color:var(--ink); } @media (max-width:700px){ .psk-konto .wcwrap--login .u-columns.col2-set{ grid-template-columns:1fr; } } .psk-konto .wcwrap--login .col-1, .psk-konto .wcwrap--login .col-2{ width:auto; float:none; } /* Nebenspalte ---------------------------------------------------------------- */ .psk-konto .loginhint{ padding:22px 24px; } .psk-konto .loginhint__t{ font-family:var(--cond); text-transform:uppercase; letter-spacing:.03em; font-size:15px; color:var(--ink); margin:0 0 14px; } .psk-konto .loginhint__list{ list-style:none; margin:0; padding:0; } .psk-konto .loginhint__list li{ display:flex; gap:11px; align-items:flex-start; font-size:14px; line-height:1.5; color:var(--muted); padding:11px 0; border-top:1px solid var(--line); } .psk-konto .loginhint__list li:first-child{ border-top:0; padding-top:0; } .psk-konto .loginhint__list svg{ width:19px; height:19px; flex:0 0 auto; margin-top:1px; fill:none; stroke:var(--orange-text); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } /* Der Anmelde-Knopf traegt KEINE Schraege mehr (Kili, 18.08.2026: „Der Button hat noch die Schraegen drin"). Die Kantenform stammt aus der Zeit des eckigen orangen Knopfes; am gerundeten Knopf des heutigen Systems saegt sie links und rechts ein Stueck heraus. Dieselbe Ueberlegung hat die neue Produktseite schon fuer ihre Navigationsknoepfe gezogen (spf-product-v2.css). `clip-path:none` explizit, nicht bloss die Regel geloescht: Die Klasse `spf-form-schraeg` haengt am und trifft ueber spf-product-layout.css weitere Knopfarten. Ohne die Gegenregel griffe eine davon frueher oder spaeter auch hier. */ .spf-form-schraeg .psk-konto .wcwrap--login .button, .spf-form-schraeg .psk-konto .wcwrap--login button[type=submit], .spf-form-schraeg .psk-konto .btn, .spf-form-schraeg .psk-konto .wcwrap .button, .spf-form-schraeg .psk-konto .wcwrap button{ clip-path:none; transform:none; } /* ============================================================================= AUS DREI WPCODE-SNIPPETS UEBERNOMMEN (13.08.2026) ----------------------------------------------------------------------------- Schriftarten, Sidebar-Hover und der Nachtmodus der Kontoseite lagen bis heute als drei Snippets in `wp_head`. Sie sind hier Regel fuer Regel angekommen, unveraendert — die Reihenfolge untereinander ist dieselbe wie im , damit sich am Ergebnis nichts verschiebt. ZUM NACHTMODUS: Er haengt vollstaendig an diesen Regeln. Vor dem Umzug kamen ALLE 18 Nachtregeln der Kontoseite aus Inline-Bloecken, keine einzige aus dieser Datei. Wer hier etwas kuerzt, schaltet damit den Dunkelmodus im Kundenkonto ab. ============================================================================= */ /* ---------- Schriftarten (vormals WPCode 275564) ---------- */ /* Kein Helvetica mehr: Body/UI -> Roboto Condensed */ .psk-konto{ --sans:var(--spf-brand-sans,'Roboto Condensed','Roboto Condensed Regular',system-ui,sans-serif) !important; } /* Sidebar-Navigation in Blender (wie Kategorie-Sidebar) */ .psk-konto .nav a .nlbl{ font-family:var(--cond); } /* ---------- Sidebar-Hover (vormals WPCode 275561) ---------- */ .psk-konto .nav a{ transition: background .15s ease, color .15s ease, padding-left .15s ease !important; } /* Akzent-Balken für alle Items (auch aktiv) im Kategorie-Stil, zentriert */ .psk-konto .nav a::before, .psk-konto .nav a.active::before{ content:""; position:absolute; left:2px !important; right:auto !important; top:50% !important; bottom:auto !important; width:3px !important; height:58% !important; border-radius:2px !important; background:var(--orange); transform:translateY(-50%) scaleY(0); transition:transform .15s ease; } /* Hover: Balken einfahren + Hintergrund + Text/Icon orange + leichter Einzug */ @media (hover:hover){ .psk-konto .nav a:hover{ background:var(--hover); color:var(--orange-text); padding-left:16px; }} .psk-konto .nav a.active::before{ transform:translateY(-50%) scaleY(1) !important; } @media (hover:hover){ .psk-konto .nav a:hover::before{ transform:translateY(-50%) scaleY(1) !important; }} @media (hover:hover){ .psk-konto .nav a:hover .nic{ color:var(--orange-text); }} /* ---------- Nachtmodus (vormals WPCode 275562) ---------- */ /* Dunkle Palette (identisch zur Kategorieseite) */ html.spf-night .psk-konto{ --ink:#e8eaed; --hover:#202226; --card:#1a1c1e; --line:#2a2d30; --line-strong:#34373b; --border:#2a2d30; --muted:#9aa0a6; --faint:#9aa0a6; --panel:#17181a; --bg:#0f1011; --orange-soft:color-mix(in srgb, var(--brand-accent,#ff6600) 16%, transparent); /* STATUSROT AUFHELLEN (Kili, 04.09.2026, „Farbenfix fuer den gesamten Bereich") `--out` #e0453c haelt auf dem Kartengrund #1a1c1e nur **4,14:1**. Die Nachtfassung ist so weit aufgehellt, dass sie 4,5 haelt und den Farbton behaelt. Der Wert ist an der SCHWIERIGSTEN Stelle gerechnet, nicht am Kartengrund: In den Bestelldetails liegt der Storniert-Streifen auf einer leicht roetlichen Flaeche (`rgba(224,69,60,.12)` ueber #1a1c1e = #322122), und dort kostet die Toenung Kontrast. #e25249 kam darauf nur auf 4,02. #e5615a haelt 4,50 auf der 12-Prozent-Flaeche, 4,71 auf der 8-Prozent-, 5,04 auf #1a1c1e und 5,61 auf der Nachtbuehne. Das Token versorgt auch die Bestelldetails (.pso) — den Storniert-Streifen, die Ampel und den „Abmelden"-Eintrag in der Navigation. `--ok` bleibt unveraendert: #22a447 haelt dort bereits 5,26:1. */ --out:#e5615a; /* Guthaben-Bewegungen: Die Betraege stehen als Inline-Stil im PHP (class-bso-wallet-myaccount.php) und waren deshalb bisher nicht umschaltbar — gemessen auf dem Kartengrund #1a1c1e: Minus #b00020 nur **2,33:1**, Plus #1a7f37 **3,37:1**. Das PHP zieht die Farbe jetzt aus diesen Variablen, der Tagwert bleibt als Rueckfall darin stehen. */ --bsow-minus:#e5615a; --bsow-plus:#1f9741; --draw-fill:#202226; --draw-stroke:#3a3d42; --draw-stroke-strong:#5b6068; } /* Seitenhintergrund um den Container */ html.spf-night body:has(.psk-konto){ background:#0f1011; } /* Die Signatur fuer Schrift und Kanten im Konto. Husqvarna: Gelb, weil das Tagblau #273a60 auf #17181a nur 1,57:1 und auf der Hover-Flaeche #303338 sogar nur 1,12:1 erreicht. KTM: dasselbe Orange wie am Tag. */ html.spf-night .psk-konto{ --orange-text:var(--spf-brand-night, var(--orange)); } /* Ghost-/Sekundär-Button solide (nicht transparent), klar erkennbar */ html.spf-night .psk-konto .btn.ghost{ background:#26282c; border-color:var(--line-strong); color:var(--ink); } @media (hover:hover){ /* 10.09.2026: Nachtblock trug die TAGfarbe. Auf Husqvarna ist das #273a60 und kommt auf dem dunklen Grund nur auf 1,12:1 — unter jeder Schwelle. Nachts gilt die Signatur `--spf-brand-night` (HQV #ffed00, KTM unveraendert #ff6600). Sweep-Befund, siehe [[Markenblinde Farbregeln]]. */ html.spf-night .psk-konto .btn.ghost:hover{ background:#303338; border-color:var(--orange-text); color:var(--orange-text); }} /* Mobiler Nav-Umschalter dunkel */ html.spf-night .psk-konto .nav-toggle{ background:var(--card); border-color:var(--line-strong); } /* --- Bricks-/WooCommerce-Variablen im Konto auf die dunkle Palette --- */ /* Betrifft Bestelldetails (mark, Mengen-Badges, Summen-Zeile, Raender), Downloads-/Adress-Tabellen und Hinweisboxen. */ html.spf-night .psk-konto{ --bricks-bg-light:var(--hover); --bricks-bg-dark:#0f1011; --bricks-border-color:var(--line); --bricks-text-dark:var(--ink); --bricks-text-medium:var(--muted); --bricks-text-light:var(--faint); --bricks-tooltip-bg:#26282c; --bricks-tooltip-text:var(--ink); --bricks-bg-info:rgba(0,176,244,.12); --bricks-bg-success:rgba(17,183,107,.12); --bricks-bg-warning:rgba(255,161,0,.12); --bricks-bg-danger:rgba(250,67,98,.12); } /* Akzentfarbe fuer TEXT im Nachtmodus. Gemessen am 18.08.2026: „Passwort vergessen?" stand bei Husky in #273A60 auf #080D15 — Kontrast 1,72:1, WCAG 1.4.3 verlangt 4,5:1. Die Markenfarbe traegt als Flaeche (Knopf: 11,29:1 mit weisser Schrift), als Schrift auf dunklem Grund traegt sie nicht. `--spf-brand-night` ist genau dafuer da und je Marke gesetzt: bei KTM dasselbe Orange wie am Tag, bei Husqvarna das Signalgelb. Bewusst NUR fuer Text und Kanten — `--orange` bleibt unangetastet, sonst wuerde der Anmelden-Knopf bei Husky gelb mit weisser Schrift. */ /* ROLLEN-AUSSCHLUSS FUER KNOEPFE (Kili, 04.09.2026: „Button-Text nicht lesbar") `.wcwrap a` trifft jeden Link im Woo-Bereich — auch die, die als Knopf gestaltet sind: „Anzeigen" und „Verfolgen" in der Bestelluebersicht sind . Die Regel hat (0,3,2) und schlaegt damit die Knopfregel (0,3,0), also bekam der Text die Markenfarbe. Der Knopf hat aber schon eine Markenflaeche — Orange auf Orange, gemessen 1,00:1. Der Text war schlicht unsichtbar. Ein Knopf ist kein Link im Sinne dieser Regel; seine Schrift richtet sich nach seiner Flaeche, nicht nach der Linkfarbe. */ html.spf-night .psk-konto .wcwrap a:not(.button):not(.woocommerce-button):not(.spfadr-btn):not(.spfadr-mini):not([class*="btn"]), html.spf-night .psk-konto .lost_password a, html.spf-night .psk-konto .woocommerce-LostPassword a, html.spf-night .psk-konto .crumbs a:hover, html.spf-night .psk-konto .link{ color:var(--orange-text); } html.spf-night .psk-konto input:not([type=checkbox]):not([type=radio]):focus{ border-color:var(--orange-text); box-shadow:0 0 0 3px color-mix(in srgb, var(--orange-text) 22%, transparent); } /* Bricks setzt fuer (Bestellnummer/Datum/Status) hart color:#000 */ html.spf-night .psk-konto mark{ color:var(--ink); } /* --- Formularfelder (Kontodetails, Adressen, Passwort) --- */ /* Ohne diese Regel bleiben Eingabefelder weiss, waehrend die Schrift hell ist -> getippter Text praktisch unsichtbar. */ html.spf-night .psk-konto input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), html.spf-night .psk-konto textarea, html.spf-night .psk-konto select{ background:#17181a; color:var(--ink); border-color:var(--line-strong); } html.spf-night .psk-konto input:not([type="checkbox"]):not([type="radio"]):focus, html.spf-night .psk-konto textarea:focus, html.spf-night .psk-konto select:focus{ /* 10.09.2026: Der Fokusrand trug nachts die Tagfarbe — auf Husqvarna #273a60 gegen #17181a, also 1,57:1. Jetzt die Signatur (HQV #ffed00, 14,69:1). Die Regel bei „input:focus" weiter oben deckt schon `input` ab (mitsamt Fokusring per box-shadow) — HIER stehen zusaetzlich `textarea` und `select`, die dort fehlen. Fuer `input` ist die Farbe damit doppelt gesetzt, aber identisch; die box-shadow der oberen Regel bleibt unangetastet. */ border-color:var(--orange-text); outline:none; } html.spf-night .psk-konto input::placeholder, html.spf-night .psk-konto textarea::placeholder{ color:var(--faint); } html.spf-night .psk-konto select option{ background:#1a1c1e; color:var(--ink); } /* Select2 (Laenderauswahl in den Adressen) */ html.spf-night .psk-konto .select2-selection, html.spf-night .psk-konto .select2-selection--single{ background:#17181a; border-color:var(--line-strong); color:var(--ink); } html.spf-night .psk-konto .select2-selection__rendered{ color:var(--ink); } /* Select2-Dropdown haengt am , daher ueber die Konto-Seite scopen */ html.spf-night body:has(.psk-konto) .select2-dropdown{ background:#1a1c1e; border-color:#34373b; color:#e8eaed; } html.spf-night body:has(.psk-konto) .select2-results__option[aria-selected="true"], html.spf-night body:has(.psk-konto) .select2-results__option--highlighted{ background:#202226; color:#e8eaed; } html.spf-night body:has(.psk-konto) .select2-search__field{ background:#17181a; color:#e8eaed; border-color:#34373b; } /* Drei Stellen sind beim Umzug zu Marken-Token geworden, damit EINE Datei beide Shops bedient — die Husky-Fassung dieser Snippets unterschied sich in genau diesen dreien: 1. Schriftfamilie: KTM Roboto Condensed, Husky Helvetica Neue -> --spf-brand-sans. 2. Weicher Markenton: rgba(255,102,0,.16) gegen rgba(39,58,96,.16) -> `color-mix` auf --brand-accent, damit die 16 % erhalten bleiben; das --spf-brand-soft der Palette liegt bei 8 % und passt hier nicht. 3. Der Rueckfall `html.spf-night body.page-id-270979` ist entfallen. Er sicherte Browser ohne `:has()` ab und trug eine feste Seiten-ID — auf Husky die falsche (7053). `body:has(.psk-konto)` steht davor und trifft beide; ohne `:has()` bleibt nur der Seitengrund hell, das Konto selbst ist dunkel. */ /* ---------- Bestellungen-Tabelle (vormals WPCode 275774 / Husky 5329) ---------- Die beiden Shop-Fassungen waren zeichengleich (5.525 Zeichen), deshalb steht das hier einmal. Es formt die WooCommerce-Tabellen im Konto: Kopfzeile, Zeilenlinien, Knoepfe, Blaetterung. Lief bis zum 13.08.2026 als