/* Seitenblock 31 - Kontoseite "Kontodetails" (/mein-konto/edit-account/). * * Angelegt 2026-08-10 nach IZ-Kompass/3_Architekturplan_Kaufstrecke.md, * Abschnitt 6, Block 31. Die Felder gestaltet Bauteil 01 * (css/kauf/01-feld.css), die Feldgruppen Bauteil 02 * (css/kauf/02-formular.css). Hier steht ausschliesslich, was diese * fremde Vorlage zusaetzlich braucht. * * ================================================================ * WAS DIESE SEITE VOM ADRESSFORMULAR UNTERSCHEIDET - gemessen 2026-08-10 * ================================================================ * 1. Die Felder kommen NICHT aus woocommerce_form_field(), sondern stehen * als festes Markup in templates/myaccount/form-edit-account.php * (WooCommerce 11.0.0). Die Feldaufbereitung aus Bauteil 02 * (Klassenzuordnung, aria-describedby) erreicht sie deshalb NICHT - was * hier nichts kostet: aria-describedby setzt die Vorlage selbst * (account_display_name_description), und Spaltenbreiten braucht diese * Seite nicht. * 2. WooCommerce gruppiert die drei Passwortfelder bereits selbst in einem *
mit SICHTBARER "Passwort aendern". Sie wird * uebernommen, nicht ersetzt (Regel 16) - nur der Rahmen und die * Legendendarstellung des Browsers weichen der Form aus Bauteil 02. * 3. Das Raster der Zeilen kommt aus dem Parent-Theme: * .woocommerce-EditAccountForm .woocommerce-form-row { * display: grid; grid-template-columns: 25% 1fr; ... } * OHNE !important, aber ebenfalls Bestand - und identisch mit dem der * Adressseite. Es wird uebernommen, damit die beiden Kontoseiten * untereinander gleich aussehen. * * ================================================================ * WOHER DER ZEILENABSTAND KOMMT * ================================================================ * Gleiche Lage und gleiche Loesung wie in 30-konto-adressen.css: Bauteil 02 * nimmt den Aussenabstand der Feldzeilen weg, weil es ihn sonst im eigenen * Raster ueber gap vergibt; dieses Raster gibt es hier nicht. Der Abstand * kommt deshalb vom Formular selbst. Flex, nicht Grid - Begruendung im Kopf * von 30-konto-adressen.css. * * Der Behaelter
zwischen den Zeilen steht im Bestand * bereits auf display:none (gemessen 2026-08-10) und erzeugt in einem * Flex-Behaelter deshalb keinen zusaetzlichen Zwischenraum. * * GEMESSENER BESTAND: 20px zwischen den Zeilen. Neu: var(--sp-4) = 16px - * Abstandsskala des Katalogs, 20px steht dort nicht. Abweichung A-K4. * * KEIN HEX-LITERAL, KEINE PX-SCHRIFTGROESSE, KEIN RADIUS AUSSER 4px/3px/50%, * KEIN !important. */ .iz-kauf-formular .woocommerce-EditAccountForm { display: flex; flex-direction: column; gap: var(--sp-4); } /* ---- Feldgruppen ---- * Gilt fuer BEIDE: die Gruppe "Kontodetails" aus * inc/kauf-konto-formulare.php (Klasse iz-kauf-formular__gruppe) und die * Passwortgruppe, die WooCommerce selbst mitbringt. Beide sind * Flex-Behaelter, damit ihre Feldzeilen denselben Abstand halten wie die * Zeilen ausserhalb. * * ZUM AUSSENABSTAND: Bauteil 02 gibt .iz-kauf-formular__gruppe einen * Abstand nach unten (var(--sp-8)). Hier wird er auf 0 gesetzt, weil das * Formular selbst schon ein gap vergibt - beides zusammen ergaebe einen * doppelten Zwischenraum, und der Katalog sagt in Abschnitt 3 * ausdruecklich, dass Abstaende zwischen Geschwistern in gap gehoeren und * nicht in Einzelmargins, weil die sich unbemerkt verdoppeln. Genau dieser * Fall. */ .iz-kauf-formular .woocommerce-EditAccountForm > fieldset { display: flex; flex-direction: column; gap: var(--sp-4); margin: 0; padding: 0; border: 0; min-inline-size: 0; } /* ---- Die sichtbare Legende der Passwortgruppe ---- * Sie ist im Bestand sichtbar und bleibt es. Nur ihre Darstellung wechselt * von der Browservorgabe (in den Rahmen eingelassener Kleintext) auf die * Form, die Bauteil 02 fuer Feldgruppen-Legenden festlegt. Die eigene * Gruppe dieses Blocks ist ausgenommen - ihre Legende ist bewusst * versteckt (screen-reader-text), weil der Bestand an dieser Stelle keine * sichtbare Ueberschrift hat. * * Die Werte sind KEINE Wiederholung aus Bauteil 02, sondern dieselbe * Gestalt auf einem fremden Element, das die Bauteilklasse nicht tragen * kann - das Markup kommt aus der WooCommerce-Vorlage und ist ohne * Vorlagenkopie nicht erreichbar. */ .iz-kauf-formular .woocommerce-EditAccountForm > fieldset:not(.iz-kauf-formular__gruppe) > legend { display: block; width: 100%; margin: 0; padding: 0 0 var(--sp-2); border-bottom: 1px solid var(--iz-border); color: var(--iz-text); font-family: "OpenSans", "Verdana", sans-serif; font-size: var(--fs-lg); /* GEMESSEN 2026-08-10, nachdem die Legende erstmals sichtbar in dieser * Form ausgeliefert wurde: sie kam KURSIV heraus. Ursache ist eine * geerbte Vorgabe fuer ; OpenSans bringt keinen kursiven * Schnitt mit, der Browser hat ihn also geneigt nachgebildet. Der * Gestaltungskatalog kennt fuer Abschnittsueberschriften keine * Kursive - deshalb ausdruecklich zurueckgesetzt. */ font-style: normal; font-weight: 700; } /* ---- Der Erlaeuterungstext unter "Anzeigename" ---- * GEMESSEN 2026-08-10 auf /mein-konto/edit-account/, 1440px: Der Satz * "So wird Ihr Name im Kontoabschnitt und in den Rezensionen angezeigt" * kommt in EBGaramond12-Regular, kursiv, 18px heraus - also in der * SERIFENSCHRIFT der Ueberschriften und groesser als die Beschriftung des * Feldes daneben (15px), zu dem er gehoert. * * ANLASS DER AENDERUNG (Regel 16 verlangt einen benannten): Katalog * Abschnitt 2 weist Bedienelementen und ihren Hilfstexten OpenSans zu und * laesst nur Groessen der Skala zu. Bauteil 01 legt fuer Hilfetexte * ausserdem --fs-sm und --iz-text-muted fest. Dieser Satz IST ein * Hilfetext; er traegt nur nicht die Klasse "description", ueber die * Bauteil 01 greift, weil die WooCommerce-Vorlage ihn als blosses * ausgibt. * * Die Kursive bleibt: sie stammt aus dem der Vorlage, ist Bestand und * kennzeichnet den Satz als Erlaeuterung. */ .iz-kauf-formular .woocommerce-EditAccountForm .woocommerce-form-row > span { color: var(--iz-text-muted); font-family: "OpenSans", "Verdana", sans-serif; font-size: var(--fs-sm); line-height: 1.5; }