/*
* Mein Konto β die Seite /mein-konto/ (Etappe C3, Aufgabe 5).
*
* π WARUM DIESE DATEI AN core/shortcode HAENGT
* Die Kontoseite hat KEINE eigene Vorlage (Plan C3/5, Spec 7) und traegt
* KEINE Bloecke. Ihr Seiteninhalt ist genau eine Zeile, an der Instanz
* abgelesen:
* [woocommerce_my_account]
* Alles darin rendert WooCommerce ueber PHP-Templates. Es gibt also weder
* einen WooCommerce-Block zum Anhaengen noch ein Blockattribut zum Setzen β
* die Gestaltung kann nur ueber die Klassennamen laufen.
*
* β οΈ core/shortcode ist der Blocktyp JEDES Shortcodes, nicht nur dieses
* einen. Gemessen ist die Kontoseite derzeit die einzige der 21 Seiten mit
* einem Shortcodeblock β aber "heute die einzige" ist kein Verlass, Amara
* kann jederzeit einen Shortcode einsetzen. Deshalb haengt JEDE Regel hier
* unter .woocommerce-account (Klasse am , ueber HTTP nachgewiesen):
* auf einer fremden Shortcodeseite greift dann nachweislich keine einzige.
*
* π΄ WIE DAS EINGELOGGTE MARKUP GEMESSEN WURDE
* Ausgeloggt zeigt /mein-konto/ NUR das Anmeldeformular β das Dashboard des
* Entwurfs ist von aussen prinzipiell unmessbar. Gemessen wurde deshalb im
* PHP-Prozess: wp_set_current_user() auf eine Testkundin, dann den Shortcode
* rendern. Keine Anmeldung, kein Cookie, kein Backend-Login.
* Ergebnis (2132 Zeichen, 12 Klassen):
* div.woocommerce
* nav.woocommerce-MyAccount-navigation > ul > liβ¦-link[--dashboard|
* --orders|--downloads|--edit-address|--edit-account|
* --customer-logout] (aktiver zusaetzlich .is-active)
* div.woocommerce-MyAccount-content
*
* GEMESSEN AM ENTWURF, Abschnitt "10 MEIN KONTO" (26.08.2026):
* Raster grid-template-columns:240px 1fr; gap:34px;
* align-items:start; padding:0 56px 64px; max-width:1080px
* Navikasten #FEFEBE; 1px rgba(128,0,139,.2); border-radius:16px;
* overflow:hidden; Mulish 14px
* Navieintrag padding:14px 20px; color:#80008B;
* border-bottom:1px rgba(128,0,139,.07)
* aktiv background:#F8F89E; color:#80008B; font-weight:700
* letzter ohne untere Linie
* Titel Allura 46px; #80008B (kommt aus wp:post-title, page.html)
* Untertitel Mulish 15px; #9A3AA0; margin-top:6px
*
* TOKENZUORDNUNG mit benannten Abweichungen:
* #FEFEBE -> accent-1 (exakt) #80008B -> primary (exakt)
* #F8F89E -> accent-5 ABWEICHUNG: liegt zwischen accent-2 und accent-5;
* dieselbe Stelle und dieselbe Entscheidung wie in kaufstrecke.css
* rgba(128,0,139,.07) -> rand.zart (NEU in theme.json, color-mix 7 %)
* 240px -> breite.kontospalte (NEU in theme.json, exakt)
* gap 34px -> spacing|70 (30px) ABWEICHUNG 4px
* padding 20px -> spacing|60 (22px) ABWEICHUNG 2px; 22px ist der Wert,
* den der Entwurf im selben Abschnitt fuer seine Kaesten nutzt
* Mulish 14px -> font-size medium (15px) ABWEICHUNG 1px
*
* π΄ WAS DER ENTWURF ZEIGT UND WOOCOMMERCE NICHT LIEFERT β HIER BEWUSST NICHT
* GEBAUT: drei Kennzahlkarten (Bestellungen / Termine / Downloads) und eine
* Tabelle "Letzte Bestellungen". WooCommerces dashboard.php besteht aus zwei
* Absaetzen, sonst nichts (Quelle gelesen, Fassung 4.4.0). Beides waere neue
* Funktionalitaet ueber den Haken woocommerce_account_dashboard, nicht
* Gestaltung β und die Karte "Termine" haette gar keinen Datenbestand: ein
* Terminsystem gibt es in dieser Installation nicht. Entscheidung liegt bei
* Moritz, siehe C3-Abnahmeblatt.
*
* SETZUNG (der Entwurf zeigt sie nicht): das Anmeldeformular. Ausgeloggt ist
* es das Einzige, was die Seite zeigt β es unbehandelt zu lassen hiesse, die
* einzige oeffentlich sichtbare Fassung der Seite ungestaltet auszuliefern.
* Abgeleitet von den Eingabefeldern der Kasse (kaufstrecke.css), gleiche
* Klassenfamilie, gleiche Token. Herkunft: Setzung, nicht gemessen.
*
* Ausschliesslich Token, keine Hexfarbe, keine absolute Laenge (P2).
*/
/*
* π΄ WOOCOMMERCE GESTALTET DIESE SEITE SELBST β GEMESSEN, NICHT VERMUTET
* Drei Stilblaetter des Plugins greifen hier mit und laden ALLE NACH unserem
* (Position 29 gegen 34 im Stilblattverzeichnis der fertigen Seite):
* woocommerce-layout.css Zweispalter ueber float + Prozentbreiten
* (.MyAccount-navigation 30%, -content 68%)
* plus ein Clearfix auf .woocommerce
* woocommerce-blocktheme.css Navigation als schlichte Textliste:
* ul{margin:0 0 2em} li{padding:1em 0}
* li.is-active a{text-decoration:underline}
* woocommerce-smallscreen.css greift erst unter 768px (hier: nicht)
*
* β οΈ FOLGE FUER JEDE REGEL HIER: Bei GLEICHER Spezifitaet gewinnt WooCommerce,
* weil es spaeter laedt. Alles, was gegen diese drei Blaetter arbeitet, ist
* deshalb bewusst eine Stufe hoeher gefasst β der Zwischenschritt
* `.woocommerce` in jedem Selektor ist kein Zierrat, er ist der Grund, dass
* die Regel ueberhaupt gilt. Erste Fassung ohne ihn: gemessen wirkungslos.
* Kein !important β das waere hier nicht noetig und wuerde spaetere
* Korrekturen unmoeglich machen.
*/
/* --- Zweispaltiges Raster ----------------------------------------------- */
/*
* β οΈ .woocommerce allein waere falsch β diese Klasse traegt auch der
* Warenkorb, die Kasse und die Produktseite. Der Vorfahre .woocommerce-account
* grenzt auf die Kontoseite ein.
*/
.woocommerce-account .woocommerce {
display: grid;
grid-template-columns: var(--wp--custom--breite--kontospalte) 1fr;
gap: var(--wp--preset--spacing--70);
align-items: start;
}
/*
* π΄ DER TEUERSTE BEFUND DIESER DATEI β woocommerce.css haengt an
* .woocommerce einen Clearfix: ::before und ::after mit content:" " und
* display:table. In einem FLOAT-Layout ist das harmlos. In einem GRID werden
* beide zu vollwertigen Rasterfeldern.
* Gemessen, bevor diese Regel da war β und jede Zahl passte zusammen:
* ::before nahm Zeile 1 / Spalte 1,
* die Navigation rutschte auf Zeile 1 / Spalte 2 (links 284 = 14+240+30),
* der Inhalt auf Zeile 2 / Spalte 1 und war dort 163,188px breit β
* exakt 68 % von 240px, also die Prozentbreite aus woocommerce-layout.css
* angewandt auf die schmale Navigationsspalte.
* Es sah aus wie "das Raster greift nicht". Es griff, nur mit vier Feldern
* statt zwei.
*
* β οΈ ZWEITER ANLAUF NOETIG: Die erste Fassung hiess
* `.woocommerce-account .woocommerce::before` β genau der Selektor, den
* woocommerce.css selbst fuehrt. Gleiche Spezifitaet, spaetere Ladung,
* also wirkungslos. Der Zwischenschritt `main` macht daraus 0,2,2 gegen
* 0,2,1 und ist kein Kunstgriff: WooCommerce selbst schreibt in
* woocommerce-blocktheme.css `.woocommerce-account main .woocommerce`.
*
* β οΈ Und eine Messfalle dazu: Direkt nach location.reload() meldete
* getComputedStyle noch content:"normal" β das Stilblatt war da noch nicht
* angewandt. Der Befund entstand erst bei der zweiten Messung ueber die
* Regelquellen. Eine Messung unmittelbar nach dem Neuladen zaehlt nicht.
*/
.woocommerce-account main .woocommerce::before,
.woocommerce-account main .woocommerce::after {
content: none;
}
/*
* Zusaetzlich die beiden echten Felder ausdruecklich setzen. Das ist keine
* Doppelung aus Vorsicht, sondern die Regel, die auch dann noch traegt, wenn
* WooCommerce seinen Clearfix eines Tages anders schreibt: Wo Navigation und
* Inhalt liegen, haengt dann nicht mehr an ihrer Reihenfolge im Fluss.
*/
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation {
grid-column: 1;
grid-row: 1;
}
.woocommerce-account .woocommerce .woocommerce-MyAccount-content {
grid-column: 2;
grid-row: 1;
}
/*
* Die Prozentbreiten und Floats aus woocommerce-layout.css zuruecknehmen:
* im Raster bestimmt die Spalte die Breite, nicht 30/68 Prozent. Floats
* ignoriert ein Grid-Container ohnehin β sie stehen hier nur, damit die
* Absicht sichtbar bleibt und die Regel auch dann traegt, wenn das Raster
* im Schmalbild einmal aufgeloest wird.
*/
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce .woocommerce-MyAccount-content {
width: auto;
float: none;
}
/*
* π΄ SCHMALANSICHT β zum ersten Mal gemessen am 13.09.2026 (Etappe D).
* Bei 375px Inhaltsbreite blieb die Navigation 240px breit, der Inhalt
* begann bei 284px, und die ganze Seite lief 99px nach rechts ueber
* (scrollWidth 474). Die Bestelltabelle stand abgeschnitten neben der
* Navigation. Seit C3 hatte das Raster keine Regel fuer schmale Bildschirme.
*
* Unter WooCommerces eigenem Umbruchpunkt stehen Navigation und Inhalt
* untereinander. minmax(0, 1fr) statt 1fr: sonst darf ein breiter Inhalt
* (die Tabelle) die Spalte ueber die Bildschirmbreite hinaus aufdruecken.
*/
/* ausnahme: 768px ist WooCommerces eigener Umbruchpunkt (woocommerce-smallscreen.css) - eine Medienabfrage kann keine CSS-Variable lesen */
@media (max-width: 768px) {
.woocommerce-account .woocommerce {
grid-template-columns: minmax(0, 1fr);
}
.woocommerce-account .woocommerce .woocommerce-MyAccount-content {
grid-column: 1;
grid-row: 2;
}
}
/* --- Kontonavigation ----------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation {
background-color: var(--wp--preset--color--accent-1);
border: var(--wp--custom--rand--breite) solid var(--wp--custom--rand--gedaempft);
border-radius: var(--wp--custom--radius--weich);
overflow: hidden;
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--medium);
}
/* woocommerce-blocktheme.css setzt hier margin:0 0 2em β gleiche Spezifitaet
wie eine Fassung ohne .woocommerce, und es laedt spaeter. Gemessen: 30px
Abstand unter dem Kasten, den der Entwurf nicht kennt. */
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul {
margin: 0;
padding: 0;
list-style: none;
}
/* Dasselbe fuer li{padding:1em 0}: gemessen 70px hohe Eintraege statt der
46px des Entwurfs, und die Trennlinie sass 15px unter ihrem Text. Das
Polster gehoert auf den Verweis, damit die ganze Zeile anklickbar ist. */
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation-link {
margin: 0;
padding: 0;
list-style: none;
border-bottom: var(--wp--custom--rand--breite) solid var(--wp--custom--rand--zart);
}
/*
* Der letzte Eintrag (Abmelden) traegt im Entwurf KEINE untere Linie. Der
* Klassenname --customer-logout waere die naheliegende Wahl, taugt aber
* nicht: welcher Eintrag zuletzt steht, entscheidet WooCommerce ueber den
* Filter woocommerce_account_menu_items, und Abmelden laesst sich abschalten.
* :last-child trifft immer den, der tatsaechlich unten steht.
*/
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation-link:last-child {
border-bottom: 0;
}
/*
* β οΈ Die drei Unterstreichungsregeln des Plugins muessen einzeln geschlagen
* werden, jede mit ihrer eigenen Stufe:
* li a text-decoration:none (deckt sich, unstrittig)
* li a:hover text-decoration:underline (0,2,2 β hier ueberschrieben)
* li.is-active a text-decoration:underline (0,3,1 β braucht 0,4,1)
* Der Entwurf zeigt den aktiven Eintrag als hinterlegte Zeile, nicht als
* unterstrichenen Text.
*/
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation-link a,
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation-link a:hover {
display: block;
padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
color: var(--wp--preset--color--primary);
text-decoration: none;
transition: var(--wp--custom--uebergang--ruhig);
/* Ohne diese Zeile erben die Eintraege die Fliesstext-Zeilenhoehe und
werden 55px hoch β gemessen. Der Entwurf zeigt 46px: 18px Textzeile
plus zweimal 14px Polster. 18/15 = 1,2. Einheitenlos, also keine
absolute Laenge im Sinne von P2. */
line-height: 1.2;
}
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation-link.is-active a {
background-color: var(--wp--preset--color--accent-5);
font-weight: 700;
text-decoration: none;
}
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation-link a:hover {
background-color: var(--wp--preset--color--accent-2);
}
/* --- Inhaltsspalte ------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-content {
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--medium);
color: var(--wp--preset--color--primary-light);
line-height: 1.8;
}
/*
* π΄ :not(.button) SEIT 13.09.2026. Vorher hiess die Regel schlicht
* `.woocommerce-MyAccount-content a` und traf damit auch WooCommerces Knoepfe
* im Inhaltsbereich (a.woocommerce-button.button). Gemessen am Knopf
* "Anzeigen" der Bestelltabelle: Schrift rgb(128,0,139) auf Grund
* rgb(128,0,139) - ein lila Balken ohne lesbaren Text, auf Moritz'
* Bildschirmfoto. Dasselbe haette jeden anderen Kontoknopf getroffen
* (Bestellung bezahlen, "Produkte durchsuchen" bei leerer Liste).
*/
.woocommerce-account .woocommerce-MyAccount-content a:not(.button) {
color: var(--wp--preset--color--primary);
}
/*
* Der Name in "Hallo β¦" ist im Entwurf primary und fett β
* WooCommerce setzt dafuer ohne Klasse.
*/
.woocommerce-account .woocommerce-MyAccount-content strong {
color: var(--wp--preset--color--primary);
font-weight: 700;
}
/* --- Bestelltabelle (/mein-konto/bestellungen/) -------------------------- */
/*
* GEMESSEN AM ENTWURF, Abschnitt "10 MEIN KONTO", Tabelle "Letzte
* Bestellungen" (13.09.2026). Der Entwurf zeigt sie auf dem Dashboard, das
* WooCommerce nicht baut (siehe Kopf; entschieden von Moritz am 13.09.2026:
* kein eigenes Dashboard). Dieselbe Tabelle liefert WooCommerce aber als
* Bestelluebersicht - dort gehoert die Gestaltung hin.
* Kasten #FEFEBE; 1px rgba(128,0,139,.2); border-radius:16px;
* overflow:hidden
* Kopfzeile padding:14px 22px; Grund #F8F89E; Mulish 11px; 700;
* letter-spacing:.1em; uppercase; #80008B
* Zeile padding:16px 22px; align-items:center;
* border-bottom:1px rgba(128,0,139,.07), letzte ohne;
* Mulish 13px; #80008B
* Status inline-block; padding:4px 11px; border-radius:20px;
* 11px; 700; letter-spacing:.03em
* Abgeschlossen Grund #15603D, Schrift #FEFEBE
* In Bearbeitung Grund rgba(145,22,148,.14), Schrift #5E0068
* Summe #80008B; 700
* Aktion "Ansehen" als TEXTVERWEIS, #80008B, 700 - kein Knopf
*
* VORHER GEMESSEN: WooCommerces Tabelle in 12,75px (woocommerce.css:
* .my_account_orders{font-size:.85em}), Polster 4px 8px, Radius 5px, und
* "Anzeigen" als lila Balken ohne Schrift (Ursache: Inhaltsverweise oben).
*
* SETZUNG: Der Entwurf zeigt nur zwei Status. Alle uebrigen (In
* Wartestellung, Zahlung ausstehend, Storniert, Erstattet, Fehlgeschlagen)
* tragen die ruhige Pille von "In Bearbeitung"; gruen ist allein
* "Abgeschlossen". Die Statusklasse setzt hh_bestellstatus_pille() in
* functions.php - WooCommerce selbst gibt den Status als nackten Text aus.
*
* TOKENZUORDNUNG mit benannten Abweichungen:
* #F8F89E -> accent-5 ABWEICHUNG wie bei der Navigation oben
* 14px / 22px -> spacing|40 / spacing|60 (exakt)
* 16px -> spacing|50 (18px) ABWEICHUNG 2px
* 13px -> font-size medium (15px) ABWEICHUNG 2px, wie die Zahlungszeilen
* .1em -> laufweite.tabellenkopf (NEU, exakt)
* .03em -> laufweite.versal (.05em) ABWEICHUNG .02em
* 4px 11px -> spacing|20 (exakt) / spacing|30 (9px) ABWEICHUNG 2px
* Radius 20px -> radius.rund (30px): bei einer 19px hohen Pille sichtbar
* identisch, beides ergibt volle Halbkreise
* #15603D -> farbe.status-abgeschlossen (NEU, exakt)
* rgba(145,22,148,.14) -> farbe.status-offen (NEU, exakt:
* primary-light #911694 zu 14 %)
*
* β οΈ SPEZIFITAET: woocommerce.css fuehrt `.woocommerce table.my_account_orders
* td` (0,2,2), woocommerce-blocktheme.css fuer die Aktionsspalte
* `.woocommerce-account .woocommerce-orders-table__cellβ¦-order-actions a`
* (0,3,1, dort display:block und zentriert) - beide laden spaeter. Deshalb
* auch hier der Zwischenschritt .woocommerce.
*/
.woocommerce-account .woocommerce table.woocommerce-orders-table {
width: 100%;
margin: 0 0 var(--wp--preset--spacing--60);
border: var(--wp--custom--rand--breite) solid var(--wp--custom--rand--gedaempft);
border-radius: var(--wp--custom--radius--weich);
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
background-color: var(--wp--preset--color--accent-1);
font-size: var(--wp--preset--font-size--medium);
color: var(--wp--preset--color--primary);
}
/*
* β οΈ GEOMETRIE DES ENTWURFS: 22px stehen dort nur an den AUSSENKANTEN der
* Zeile, zwischen den Spalten liegt ein gap von 10px. Erste Fassung setzte
* 22px an JEDE Zelle - gemessen brach "13. September 2026" und
* "123,00 β¬ fΓΌr 1 Artikel" in zwei Zeilen, weil 88px Polster mehr in der
* 730px breiten Tabelle standen als im Entwurf. Deshalb innen je halbe
* Spaltenluecke, aussen der Kantenwert.
* gap 10px -> zweimal spacing|20 (4px) = 8px ABWEICHUNG 2px
*/
.woocommerce-account .woocommerce table.woocommerce-orders-table thead th {
padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
border: 0;
background-color: var(--wp--preset--color--accent-5);
font-size: var(--wp--preset--font-size--small);
font-weight: 700;
letter-spacing: var(--wp--custom--laufweite--tabellenkopf);
text-transform: uppercase;
line-height: 1.5;
}
/*
* Die Ecken der Kopfzeile zusaetzlich runden. overflow:hidden am
* genuegt in Chrome, ist fuer Tabellen aber nicht in jedem Browser verlaesslich
* - ohne diese Zeilen stuende der Grund der Kopfzeile dann eckig ueber dem
* runden Rahmen. Radius innen = Radius aussen minus Rahmenbreite.
*/
.woocommerce-account .woocommerce table.woocommerce-orders-table thead th:first-child {
border-top-left-radius: calc(var(--wp--custom--radius--weich) - var(--wp--custom--rand--breite));
}
.woocommerce-account .woocommerce table.woocommerce-orders-table thead th:last-child {
border-top-right-radius: calc(var(--wp--custom--radius--weich) - var(--wp--custom--rand--breite));
}
/* Die Bestellnummer steht in einem | (WooCommerce: scope="row") und waere
damit fett; der Entwurf zeigt sie in normaler Staerke. */
.woocommerce-account .woocommerce table.woocommerce-orders-table tbody th,
.woocommerce-account .woocommerce table.woocommerce-orders-table tbody td {
padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--20);
border-top: var(--wp--custom--rand--breite) solid var(--wp--custom--rand--zart);
font-weight: 400;
vertical-align: middle;
line-height: 1.5;
}
/* Aussenkanten der Zeile: 22px wie im Entwurf (siehe Kopfzeile oben). */
.woocommerce-account .woocommerce table.woocommerce-orders-table tr > :first-child {
padding-left: var(--wp--preset--spacing--60);
}
.woocommerce-account .woocommerce table.woocommerce-orders-table tr > :last-child {
padding-right: var(--wp--preset--spacing--60);
}
/* Entwurf: Linie ZWISCHEN den Zeilen, keine unter der Kopfzeile. */
.woocommerce-account .woocommerce table.woocommerce-orders-table tbody tr:first-child > * {
border-top: 0;
}
.woocommerce-account .woocommerce .woocommerce-orders-table__cell-order-number a {
text-decoration: none;
}
.woocommerce-account .woocommerce .woocommerce-orders-table__cell-order-number a:hover {
text-decoration: underline;
}
.woocommerce-account .woocommerce .woocommerce-orders-table__cell-order-total .woocommerce-Price-amount {
font-weight: 700;
}
.woocommerce-account .hh-bestellstatus {
display: inline-block;
padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
border-radius: var(--wp--custom--radius--rund);
background-color: var(--wp--custom--farbe--status-offen);
color: var(--wp--preset--color--primary-dark);
font-size: var(--wp--preset--font-size--small);
font-weight: 700;
letter-spacing: var(--wp--custom--laufweite--versal);
line-height: 1.5;
white-space: nowrap;
}
.woocommerce-account .hh-bestellstatus--completed {
background-color: var(--wp--custom--farbe--status-abgeschlossen);
color: var(--wp--preset--color--accent-1);
}
/*
* Die Aktionen als Textverweise. WooCommerce vergibt ihnen die Kernklasse
* wp-element-button und damit die globale Knopfgestalt aus theme.json;
* alles, was die Knopfgestalt ausmacht, wird hier zurueckgenommen.
* Mehrere Aktionen (bei offenen Bestellungen z. B. "Bezahlen" und
* "Stornieren") stehen nebeneinander statt untereinander.
*/
.woocommerce-account .woocommerce .woocommerce-orders-table__cell-order-actions a.woocommerce-button,
.woocommerce-account .woocommerce .woocommerce-orders-table__cell-order-actions a.woocommerce-button:hover {
display: inline;
margin: 0 var(--wp--preset--spacing--40) 0 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
transform: none;
opacity: 1;
color: var(--wp--preset--color--primary);
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--medium);
font-weight: 700;
text-align: left;
text-decoration: none;
}
.woocommerce-account .woocommerce .woocommerce-orders-table__cell-order-actions a.woocommerce-button:hover {
text-decoration: underline;
}
.woocommerce-account .woocommerce .woocommerce-orders-table__cell-order-actions a.woocommerce-button:last-child {
margin-right: 0;
}
/* --- Anmeldeformular (SETZUNG, siehe Kopf) ------------------------------- */
/*
* Ausgeloggt rendert der Shortcode NICHT das Raster oben, sondern ein
* einspaltiges Formular. Ueber HTTP gemessene Klassen:
* .woocommerce-form.woocommerce-form-login.login, .form-row, .form-row-wide,
* .woocommerce-Input.woocommerce-Input--text, .woocommerce-button,
* .woocommerce-LostPassword.
* β οΈ Deshalb muss das Raster oben hier zurueckgenommen werden: eine
* einspaltige Anmeldung in einem 240px-Raster wuerde auf die schmale Spalte
* gequetscht.
*/
.woocommerce-account .woocommerce:has(.woocommerce-form-login) {
display: block;
max-width: var(--wp--custom--lesetextbreite--zitat);
}
.woocommerce-account .woocommerce-form-login {
background-color: var(--wp--preset--color--accent-1);
border: var(--wp--custom--rand--breite) solid var(--wp--custom--rand--gedaempft);
border-radius: var(--wp--custom--radius--weich);
padding: var(--wp--preset--spacing--70);
}
.woocommerce-account .form-row {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--20);
margin-bottom: var(--wp--preset--spacing--50);
}
.woocommerce-account .woocommerce-form label {
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--small);
font-weight: 700;
color: var(--wp--preset--color--primary);
}
.woocommerce-account .woocommerce-Input {
background-color: var(--wp--preset--color--base);
border: var(--wp--custom--rand--breite) solid var(--wp--custom--rand--gedaempft);
border-radius: var(--wp--custom--radius--eingabe);
padding: var(--wp--preset--spacing--40);
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--medium);
color: var(--wp--preset--color--primary);
width: 100%;
}
/*
* β οΈ Derselbe Fall wie bei den Knoepfen der Kaufstrecke: WooCommerce vergibt
* seinen Knoepfen die Kernklasse wp-element-button und damit die globalen
* Knopfstile aus theme.json. Hier wird nur Radius und Hover nachgezogen.
*/
.woocommerce-account .woocommerce-form-login .woocommerce-button {
background-color: var(--wp--preset--color--primary-light);
color: var(--wp--preset--color--accent-3);
border: 0;
border-radius: var(--wp--custom--radius--gross);
padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
font-family: var(--wp--preset--font-family--subheading);
font-size: var(--wp--preset--font-size--large);
font-weight: 600;
transition: var(--wp--custom--uebergang--ruhig);
cursor: pointer;
}
.woocommerce-account .woocommerce-form-login .woocommerce-button:hover {
background-color: var(--wp--preset--color--primary-dark);
color: var(--wp--preset--color--accent-3);
transform: translateY(var(--wp--custom--versatz--knopf-hover));
}
.woocommerce-account .woocommerce-LostPassword {
font-size: var(--wp--preset--font-size--small);
margin-top: var(--wp--preset--spacing--40);
}
|