, darin eine Gruppe mit dem * Seitentitel und dem Inhaltsbereich. Breite, Rand und Titel stehen deshalb * einmal unter "Seitenrahmen", und auch der Fliesstext darunter gilt fuer * beide -- die Begruessung im Konto ist derselbe Absatz wie einer in den AGB. * Erst was WooCommerce an eigenem Markup mitbringt, bekommt weiter unten einen * eigenen Abschnitt. * * Warenkorb, Kasse und Bestellbestaetigung sind ebenfalls Seiten, haben aber * eigene Vorlagen mit eigenen Layout-Klassen; sie liegen in * src/pages/checkout/checkout.css und laden diese Datei nicht -- siehe * isPageView() in src/functions/assets.php. * * Anders als bei Shop, Produkt und Kasse bleibt der Site-Editor hier aussen * vor: die Vorlage "page" traegt keine eigene Layout-Klasse, an der sie sich * in der Leinwand von den anderen Vorlagen unterscheiden liesse. Eine Regel * dort faerbte alle Vorlagen mit ein. * * Tokens: src/pages/design/design.css. * * Zwei Umschaltpunkte, dieselben wie im Shop: 959px setzt den Rand wie bei * Fusszeile und Produktraster schmaler, 600px verkleinert den Seitentitel, * rueckt die Ueberschriften des Fliesstextes zusammen und macht aus dem Konto * eine einzige Spalte mit der Navigation als Zeile darueber. */ /* ══ Seitenrahmen ═══════════════════════════════════════════════════════ */ /* Am haengt die Klasse nur im Frontend -- und nur dort laeuft diese Datei ueberhaupt (siehe Kopf). `page` deckt die Inhaltsseiten und das Konto ab, `single-post` einen spaeteren Beitrag unter "News". */ body.page, body.single-post { background : var(--color-bg); color : var(--color-text); font-family : var(--font-body); } body.page :focus-visible, body.single-post :focus-visible { outline : 2px solid var(--color-accent); outline-offset : 2px; } /* ── Seitenlayout ──────────────────────────────────────────────────────── Das Theme legt seinen Seitenrand an

; die Gruppe darin hebt ihn als `alignfull` mit negativen Aussenraendern wieder auf und setzt ihn selbst noch einmal. Dadurch sass die Kante des Inhalts an einem anderen Punkt als die Karte des Seitenkopfs, sobald das Fenster schmaler als die Seitenbreite plus Rand wurde. Hier traegt ihn nur noch die Gruppe -- mit derselben Breite und demselben Rand wie .c-shop-layout, also fluchtet die Kante. */ /* Die Vorlage "page" schreibt ihre Abstaende als style-Attribut in die Seite: `margin-top` an das

, `padding-block` an die Gruppe, beide auf der Stufe spacing--60 des Themes. Das sind 140px ueber dem Titel, waehrend Shop und Produktseite ihren Inhalt --space-6 unter den Seitenkopf setzen. An ein style-Attribut kommt nur das Ausrufezeichen heran -- die Vorlage selbst liegt im Site-Editor und nicht in diesem Plugin. --space-4 statt ganz ohne Abstand: zusammen mit dem Innenabstand der Gruppe darunter beginnt der Titel damit auf derselben Hoehe wie der Inhalt der Produktseite unter demselben Seitenkopf. */ body.page main, body.single-post main { margin-block-start : var(--space-4) !important; padding-inline : 0; padding-top : 0 !important; } body.page main > .wp-block-group, body.single-post main > .wp-block-group { box-sizing : border-box; display : flex; flex-direction : column; gap : var(--space-6); max-width : var(--page-width); margin-inline : auto; padding-block : 0 var(--space-6) !important; padding-inline : var(--space-4); } /* Die Gruppe steht im eingegrenzten Layout, und WordPress gibt jedem Kind daraus `margin-block: 1.2rem 0` mit -- zusammen mit dem gap oben stuende zwischen Titel und Inhalt der doppelte Abstand. */ body.page main > .wp-block-group > *, body.single-post main > .wp-block-group > * { margin-block : 0; } /* Dasselbe Layout zentriert jedes Kind, und WordPress schreibt diese Regel mit Ausrufezeichen in den Seitenkopf: .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { margin-left: auto !important; margin-right: auto !important } Ohne dasselbe Gewicht bliebe der Text mittig stehen -- das Mockup setzt Titel und Inhalt linksbuendig an den Rand und laesst rechts Luft. Das Ausrufezeichen steht in dieser Datei fast nur im Seitenrahmen -- hier, an den beiden Abstandsregeln darueber und noch einmal bei 959px -- und immer aus demselben Grund: dagegen steht entweder ein style-Attribut aus der Vorlage oder eine Regel, die WordPress selbst so ausliefert. Die einzige Ausnahme weiter unten ist die mittige Spalte des Anmeldeformulars, und die muss ihrerseits diese Regel hier ueberbieten. */ body.page main > .wp-block-group > *, body.page .entry-content > *, body.single-post main > .wp-block-group > *, body.single-post .entry-content > * { margin-inline : 0 !important; } /* Der Inhaltsbereich ist selbst wieder `alignfull` mit globalem Rand -- der zoege ihn aus dem Rand der Gruppe wieder heraus. */ body.page .entry-content, body.single-post .entry-content { padding-inline : 0; } /* ── Seitentitel ───────────────────────────────────────────────────────── Wie der Titel des Warenkorbs (checkout.css), damit "AGB" und "Mein Konto" so gross dastehen wie "Dein Warenkorb". Die Vorlage gibt ihm aus dem eingegrenzten Layout eine Textbreite und zentriert ihn darin; das Mockup stellt Ueberschriften linksbuendig an den Rand des Inhalts. */ body.page .wp-block-post-title, body.single-post .wp-block-post-title { max-width : none; margin : 0; font-family : var(--font-title); font-weight : var(--font-title-weight); font-size : 32px; line-height : 1.15; color : var(--color-text); } /* ══ Fliesstext ═════════════════════════════════════════════════════════ Gilt fuer die Inhaltsseiten und fuer die Texte, die WooCommerce im Konto ausgibt -- ein Absatz ist hier wie dort derselbe Absatz. Was nur im Konto vorkommt, steht im Abschnitt darunter. */ /* Die Schriftgroesse des Themes (22px) ist fuer einen langen Rechtstext zu gross; 15px ist die Groesse des Design-Systems. Etwas mehr Zeilenabstand als dessen 1.55, weil hier Absatz auf Absatz folgt statt einzelner Zeilen in einer Karte. * * Die Textbreite haengt am Inhaltsbereich und nicht an seinen Kindern: `ch` * misst in der Schriftgroesse des Elements selbst, und eine 22px-Ueberschrift * geriete damit um die Haelfte breiter als der Absatz darunter -- die linke * Kante bliebe zwar stehen, die rechte franste aus. Am Behaelter gerechnet * gilt ein Mass fuer alle. 60 Zeichen der Nullbreite sind rund 75 Zeichen * Text: die Breite, ab der das Auge den Zeilenanfang nicht mehr sicher * findet. Das Theme setzt hier die 645px aus theme.json und zentriert. */ body.page .entry-content, body.single-post .entry-content { max-width : 60ch; font-size : 15px; line-height : 1.65; } /* Der Rhythmus des Fliesstextes. Kein Block bringt einen eigenen Aussenabstand mit -- den Abstand setzt allein die Regel fuer aufeinanderfolgende Geschwister. So koennen keine Aussenraender zusammenfallen, der erste und der letzte Block brauchen keine Ausnahme, und nach einer Liste steht derselbe Abstand wie nach einem Absatz. Die Regel gilt fuer Nachfahren und nicht nur fuer Kinder, damit auch Absaetze in einem Zitat, einem Listenpunkt oder im Konto ohne den Abstand des Themes dastehen; ihren eigenen Rhythmus setzen die Abschnitte, die sie umgeben. :where und nicht :is: :is zaehlt fuer das Gewicht des Selektors wie sein staerkstes Argument mit, und das Nullsetzen hier schluege dann die Regel darunter, die den Abstand ueberhaupt erst setzt. :where zaehlt nicht mit. */ body.page .entry-content :where(p, ul, ol, h1, h2, h3, h4, h5, h6, blockquote, figure, table, pre), body.single-post .entry-content :where(p, ul, ol, h1, h2, h3, h4, h5, h6, blockquote, figure, table, pre) { margin-block : 0; } body.page .entry-content > * + *, body.single-post .entry-content > * + * { margin-block-start : var(--space-3); } /* ── Ueberschriften ────────────────────────────────────────────────────── In der Titel-Schrift des Mockups, in denselben Groessen wie die Abschnitte von Produktseite (22px) und Kasse (18px). Der Abstand nach oben ist groesser als der nach unten, damit eine Ueberschrift sichtbar zu dem Text gehoert, der ihr folgt. */ body.page .entry-content :is(h2, h3, h4, h5, h6), body.single-post .entry-content :is(h2, h3, h4, h5, h6) { font-family : var(--font-title); font-weight : var(--font-title-weight); line-height : 1.2; color : var(--color-text); } /* Vor einer Ueberschrift steht mehr Luft als zwischen zwei Absaetzen, nach ihr weniger -- so gehoert sie sichtbar zu dem, was ihr folgt, und nicht zu dem Abschnitt darueber. */ body.page .entry-content > * + :is(h2, h3, h4, h5, h6), body.single-post .entry-content > * + :is(h2, h3, h4, h5, h6) { margin-block-start : var(--space-8); } body.page .entry-content > :is(h2, h3, h4, h5, h6) + *, body.single-post .entry-content > :is(h2, h3, h4, h5, h6) + * { margin-block-start : var(--space-2); } body.page .entry-content h2, body.single-post .entry-content h2 { font-size : 22px; } body.page .entry-content h3, body.single-post .entry-content h3 { font-size : 18px; } body.page .entry-content h4, body.single-post .entry-content h4 { font-size : 16px; } /* Die beiden kleinsten stehen im Design-System als Auszeichnung ueber einem Absatz, nicht mehr als Ueberschriftgroesse -- darum Grossbuchstaben und gesperrt statt noch kleinerer Schrift. */ body.page .entry-content :is(h5, h6), body.single-post .entry-content :is(h5, h6) { font-family : var(--font-body); font-weight : 600; font-size : 12px; letter-spacing: 0.08em; text-transform: uppercase; color : var(--color-neutral-600); } /* ── Verweise und Auszeichnungen ─────────────────────────────────────── */ /* Der Akzent auf der warmen Flaeche traegt nur fuer Symbole und grosse Schrift genug Kontrast -- fuer Text in Absatzgroesse nimmt das Design-System die dunkle Stufe der Rampe. */ body.page .entry-content a, body.single-post .entry-content a { color : var(--color-accent-700); text-decoration : underline; text-underline-offset: 3px; } body.page .entry-content a:hover, body.single-post .entry-content a:hover { color : var(--color-accent-800); } body.page .entry-content strong, body.single-post .entry-content strong { font-weight : 600; } body.page .entry-content mark, body.single-post .entry-content mark { padding : 0 4px; border-radius : 4px; background : var(--color-accent-100); color : var(--color-accent-900); } body.page .entry-content :is(code, kbd, samp), body.single-post .entry-content :is(code, kbd, samp) { padding : 2px 6px; border-radius : 6px; background : var(--color-neutral-200); font-size : 0.9em; } /* ── Listen ────────────────────────────────────────────────────────────── Nur die des Fliesstextes: als direkte Kinder des Inhaltsbereichs. Die Listen von WooCommerce -- die Kontonavigation, die Fehlermeldung -- stecken eine Ebene tiefer in .woocommerce und behalten so ihr eigenes Aussehen. */ body.page .entry-content > :is(ul, ol), body.single-post .entry-content > :is(ul, ol) { padding-inline : var(--space-4) 0; } body.page .entry-content > :is(ul, ol) li, body.single-post .entry-content > :is(ul, ol) li { margin-block : 0 var(--space-1); padding-left : var(--space-1); } /* Der Punkt vor dem Eintrag in der Akzentfarbe -- er ist Zeichnung, kein Text, und darf deshalb die helle Stufe tragen. */ body.page .entry-content > ul li::marker, body.single-post .entry-content > ul li::marker { color : var(--color-accent); } body.page .entry-content > ol li::marker, body.single-post .entry-content > ol li::marker { color : var(--color-neutral-600); font-weight : 600; } /* ── Zitat, Linie, Bild, Tabelle ──────────────────────────────────────── Auf den heutigen Seiten kommt davon nichts vor -- sie bestehen aus Absatz, Ueberschrift und Liste. Die Bloecke stehen dem Redakteur im Editor aber offen, und ohne diese Regeln fielen sie auf das Aussehen des Themes zurueck: weisser Grund, fremde Schrift. */ body.page .entry-content blockquote, body.single-post .entry-content blockquote { margin : 0; padding : var(--space-3) var(--space-4); border-inline-start : 3px solid var(--color-accent-300); border-radius : 0 var(--radius-md) var(--radius-md) 0; background : var(--color-surface); } body.page .entry-content blockquote cite, body.single-post .entry-content blockquote cite { display : block; margin-top : var(--space-2); font-size : 13px; font-style : normal; color : var(--color-neutral-600); } /* Das Design-System zieht Weissraum einer Linie vor; wo eine gesetzt wird, bleibt sie ein Haarstrich in der Trennfarbe. */ body.page .entry-content hr, body.single-post .entry-content hr { height : 1px; margin-block : var(--space-6); border : 0; background : var(--color-divider); } body.page .entry-content figure, body.single-post .entry-content figure { margin : 0; } /* Fotos fallen wie im ganzen Shop in die warme Flaeche zurueck (.washed). */ body.page .entry-content img, body.single-post .entry-content img { display : block; max-width : 100%; height : auto; border-radius : var(--radius-md); filter : saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94); } body.page .entry-content figcaption, body.single-post .entry-content figcaption { margin-top : var(--space-1); font-size : 12px; color : var(--color-neutral-600); } /* Die .table des Design-Systems: Kopfzeile gesperrt und klein, Zeilen durch feine Linien getrennt. Wieder nur im Fliesstext -- die Bestelltabelle des Kontos wird weiter unten eigens gekleidet. */ body.page .entry-content > figure.wp-block-table table, body.single-post .entry-content > figure.wp-block-table table { width : 100%; border-collapse : collapse; font-size : 14px; } body.page .entry-content > figure.wp-block-table :is(th, td), body.single-post .entry-content > figure.wp-block-table :is(th, td) { padding : var(--space-2); border : 0; border-bottom : 1px solid var(--color-divider); text-align : left; } body.page .entry-content > figure.wp-block-table th, body.single-post .entry-content > figure.wp-block-table th { font-family : var(--font-body); font-weight : 400; font-size : 11px; letter-spacing: 0.08em; text-transform: uppercase; color : var(--color-neutral-600); } /* Der Knopf-Block: die .btn-primary des Design-Systems, dieselbe Pille wie "In den Warenkorb". */ body.page .entry-content .wp-block-button__link, body.single-post .entry-content .wp-block-button__link { padding : var(--space-2) calc(var(--space-3) * 1.4); border : 1px solid transparent; border-radius : 999px; background : var(--color-accent); color : var(--color-bg); font-family : var(--font-title); font-weight : var(--font-title-weight); font-size : 14px; line-height : 1.2; text-decoration : none; } body.page .entry-content .wp-block-button__link:hover, body.single-post .entry-content .wp-block-button__link:hover { background : var(--color-accent-600); color : var(--color-bg); } body.page .entry-content .wp-block-button.is-style-outline .wp-block-button__link, body.single-post .entry-content .wp-block-button.is-style-outline .wp-block-button__link { border-color : var(--color-divider); background : transparent; color : var(--color-text); } body.page .entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover, body.single-post .entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover { background : color-mix(in srgb, var(--color-text) 7%, transparent); color : var(--color-text); } /* ══ Mein Konto ═════════════════════════════════════════════════════════ WooCommerce baut die Seite nicht aus Bloecken, sondern aus den Vorlagen in woocommerce/templates/myaccount -- daher die Klassen woocommerce-MyAccount-* und woocommerce-form-*. Zwei Zustaende: abgemeldet steht dort das Anmeldeformular, angemeldet die Navigation neben dem Inhalt. */ /* Das Konto ist kein Fliesstext, sondern Navigation neben Inhalt: die Textbreite von oben schnuerte ihm die zweite Spalte ab. WooCommerce deckelt die Huelle zusaetzlich auf 1000px (woocommerce-blocktheme.css) -- damit endete der Inhalt vor der Kante des Seitenkopfs. */ body.woocommerce-account .entry-content, body.woocommerce-account .entry-content > .woocommerce { max-width : none; } /* WooCommerce raeumt hinter seinen Float-Spalten mit einem Clearfix auf: `content: " "; display: table` in ::before und ::after. In einem Raster ist ein solches Pseudoelement selbst ein Rasterfeld -- es besetzte die erste Spalte, schob die Navigation in die zweite und den Inhalt in die naechste Zeile. Dasselbe bei den Adressen und bei Anmeldung/Registrierung nebeneinander. Ohne Floats braucht es den Clearfix nirgends mehr. Der Selektor nennt genau die Behaelter, die weiter unten zu Rastern werden; die Meldungen tragen ihr Zeichen im selben Pseudoelement und duerfen es nicht verlieren. */ body.woocommerce-account .entry-content > .woocommerce::before, body.woocommerce-account .entry-content > .woocommerce::after, body.woocommerce-account .u-columns::before, body.woocommerce-account .u-columns::after, body.woocommerce-account .woocommerce-columns--addresses::before, body.woocommerce-account .woocommerce-columns--addresses::after, body.woocommerce-account .woocommerce .woocommerce-Address-title::before, body.woocommerce-account .woocommerce .woocommerce-Address-title::after, body.woocommerce-account .woocommerce form .form-row::before, body.woocommerce-account .woocommerce form .form-row::after { content : none; } /* Der leere Meldungsbehaelter steht immer in der Seite und risse als eigene Zeile den Abstand nach oben auf. */ body.woocommerce-account .woocommerce-notices-wrapper:empty { display : none; } /* ── Angemeldet: Navigation neben dem Inhalt ───────────────────────────── WooCommerce laesst die Navigation nach links und den Inhalt nach rechts fliessen (woocommerce-layout.css, 30% und 68%). Als Raster stehen beide oben buendig, die Karte behaelt ihre Breite und der Inhalt bekommt den Rest -- dasselbe Bild wie Sidebar und Produktraster im Shop. */ body.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) { display : grid; grid-template-columns : 240px 1fr; gap : var(--space-6); align-items : start; } /* Die Meldungen stehen ueber beiden Spalten. */ body.woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column : 1 / -1; } /* Die Karte der Sidebar aus dem Shop (.c-shop-sidebar). Bewusst nicht klebend wie dort: den Abstand zum Seitenkopf misst main.ts, und das Skript laeuft nur im Shop -- ohne den Wert schoebe sich die Karte beim Blaettern unter den Kopf. */ body.woocommerce-account .woocommerce-MyAccount-navigation { float : none; width : auto; padding : var(--space-3); border-radius : calc(var(--radius-lg) * 1.15); background : var(--color-surface); box-shadow : var(--shadow-sm); } body.woocommerce-account .woocommerce-MyAccount-navigation ul { display : flex; flex-direction : column; gap : 2px; margin : 0; padding : 0; list-style : none; } body.woocommerce-account .woocommerce-MyAccount-navigation li { margin : 0; padding : 0; } body.woocommerce-account .woocommerce-MyAccount-navigation a { display : block; padding : var(--space-2) var(--space-3); border-radius : 999px; color : var(--color-text); font-family : var(--font-title); font-weight : var(--font-title-weight); font-size : 14px; line-height : 1.2; text-decoration : none; } body.woocommerce-account .woocommerce-MyAccount-navigation a:hover { background : color-mix(in srgb, var(--color-text) 7%, transparent); color : var(--color-text); } /* Der offene Eintrag traegt die volle Akzentfarbe -- er ist der einzige Punkt der Seite, an dem etwas ausgewaehlt ist. */ body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background : var(--color-accent); color : var(--color-bg); } /* Keine Unterstreichung, an keinem der Eintraege. WooCommerce zieht sie unter den offenen Eintrag und unter jeden, auf dem der Zeiger steht (`li.is-active a` und `li a:hover` in woocommerce-blocktheme.css). Gedacht ist das fuer eine Liste schlichter Verweise; hier ist jeder Eintrag eine Pille, und die Linie lief quer durch deren Flaeche. Ausgewaehlt und angesteuert zeigt hier ohnehin der Hintergrund an, nicht der Strich. Der Selektor nennt dieselben Stellen wie WooCommerce und haengt `body` davor: dessen Regeln wiegen drei Klassen und zwei Elemente, die allgemeine Regel weiter oben nur zwei und zwei -- ohne das eine Element mehr bliebe die Linie stehen. */ body.woocommerce-account .woocommerce-MyAccount-navigation li a, body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover, body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { text-decoration : none; } /* "Abmelden" fuehrt aus dem Konto heraus und steht deshalb etwas abgesetzt unter den uebrigen Eintraegen. */ body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout { margin-block-start : var(--space-2); padding-block-start: var(--space-2); border-block-start : 1px solid var(--color-divider); } body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a { color : var(--color-neutral-600); } body.woocommerce-account .woocommerce-MyAccount-content { float : none; width : auto; min-width : 0; } /* Denselben Rhythmus wie im Fliesstext: den Abstand setzt die Regel fuer Geschwister, der erste Block bekommt keinen. .woocommerce steht mit im Selektor, damit die Regel schwerer wiegt als die Aussenraender, die WooCommerce seinen eigenen Bausteinen mitgibt -- etwa `.woocommerce table.shop_table { margin: 0 0 24px }`. Ohne das begaenne die Bestelltabelle unmittelbar unter dem Absatz darueber. */ body.woocommerce-account .woocommerce .woocommerce-MyAccount-content > * + * { margin-block-start : var(--space-4); } /* WooCommerce setzt nicht als Textmarker ein, sondern als Auszeichnung mitten im Satz: "Bestellung # 5741 vom 9. August 2026 ist aktuell In Wartestellung." Die getoente Flaeche, die der Fliesstext einem gibt, zerlegte den Satz dort in drei farbige Kaesten -- und die warme Stufe der Akzentrampe las sich darin wie eine Warnung. Hier bleibt nur der Fettdruck, so wie WooCommerce es selbst vorsieht. */ body.woocommerce-account .woocommerce .woocommerce-MyAccount-content mark { padding : 0; border-radius: 0; background : transparent; color : inherit; font-weight : 600; } /* ── Abgemeldet: Anmeldeformular ───────────────────────────────────────── Ohne die Navigation daneben steht nur das Formular in der Seite -- als schmale Spalte am linken Rand von 1280px sah das aus wie ein Rest. Titel, Ueberschrift und Formular ruecken deshalb zusammen in eine mittige Spalte von Formularbreite. Mittig steht die Spalte, nicht der Text darin: der bleibt linksbuendig, weil hier nur der Aussenabstand gesetzt wird. :not(:has(...)) trifft genau den abgemeldeten Zustand -- Anmeldung, Passwort vergessen und Passwort neu setzen. Angemeldet steht dort die Kontonavigation, und die Seite nutzt ihre volle Breite weiter. Die Breite haengt an der Spalte und nicht mehr am Formular, damit es nur eine Stelle dafuer gibt. Einzelne Formulare (wie bei nur Anmeldung) bleiben schmal; mit Registrierung nutzt der Desktop die doppelte Breite. Das Ausrufezeichen ueberbietet das `margin-inline: 0 !important` des Seitenrahmens, das den Inhalt sonst ueberall an den linken Rand zieht. */ body.woocommerce-account main > .wp-block-group:not(:has(.woocommerce-MyAccount-navigation)) > * { box-sizing : border-box; width : 100%; max-width : 420px; margin-inline : auto !important; } /* Stehen Anmeldung und Registrierung nebeneinander, nutzt die Spalte auf Desktop-Breiten den doppelten Raum fuer beide Bloecke nebeneinander. */ body.woocommerce-account main > .wp-block-group:has(.u-columns.col2-set) > * { max-width : 880px; } body.woocommerce-account .woocommerce > h2, body.woocommerce-account .u-columns h2 { margin-block : 0 var(--space-3); font-family : var(--font-title); font-weight : var(--font-title-weight); font-size : 22px; line-height : 1.2; color : var(--color-text); } /* WooCommerce zeichnet um das Anmelde- und Registrierungsformular einen eigenen Rahmen; in der Seite steht es ohne. Die Breite kommt von der Spalte darueber. */ body.woocommerce-account form.woocommerce-form-login, body.woocommerce-account form.woocommerce-form-register, body.woocommerce-account form.woocommerce-ResetPassword { margin : 0; padding : 0; border : none; border-radius : 0; } /* Ist die Registrierung eingeschaltet, stellt WooCommerce Anmeldung und Registrierung in zwei Spalten nebeneinander. Auf Desktop stehen beide als zweispaltiges Raster gleichwertig nebeneinander. */ body.woocommerce-account .u-columns.col2-set { display : grid; grid-template-columns : repeat(2, minmax(0, 1fr)); align-items : start; gap : var(--space-8); } body.woocommerce-account .u-columns > .u-column1, body.woocommerce-account .u-columns > .u-column2 { float : none; width : auto; } /* ── Formulare: Felder, Kaestchen, Knoepfe ─────────────────────────────── Anmeldung, Passwort vergessen, Adressen und Kontodetails teilen sich die Klassen form-row, woocommerce-Input und woocommerce-Button. Aussehen wie an der Kasse (checkout.css): die Pille des Design-Systems, warme Flaeche, feiner Rand. */ body.woocommerce-account .woocommerce form .form-row { display : flex; flex-direction : column; gap : 5px; margin : 0 0 var(--space-3); padding : 0; } body.woocommerce-account .woocommerce form .form-row label { margin : 0; font-family : var(--font-body); font-weight : 400; font-size : 13px; line-height : 1.4; color : var(--color-neutral-700); } body.woocommerce-account .woocommerce form .required { color : var(--color-accent-700); text-decoration : none; } /* Der Hinweis unter einem Feld ("So wird dein Name angezeigt") steht bei WooCommerce in einem und damit kursiv -- im Mockup ist erklaerender Text klein und blass, aber aufrecht. */ body.woocommerce-account .woocommerce form .form-row span em { font-size : 12px; font-style : normal; color : var(--color-neutral-600); } body.woocommerce-account .woocommerce form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], select) { box-sizing : border-box; width : 100%; min-height : 38px; padding : var(--space-2) var(--space-3); border : 1px solid var(--color-divider); border-radius : var(--radius-md); background : var(--color-surface); color : var(--color-text); caret-color : var(--color-accent); font-family : var(--font-body); font-size : 14px; } /* Ein Auswahlfeld rechnet seine Hoehe aus Schrift und Polster und stand damit auf 43px, waehrend die Textfelder daneben 38 hoch sind -- im Formular fuer die Adresse liegen beide untereinander. Feste Hoehe wie dort. Betrifft die Felder, die WooCommerce als schlichtes aus und stellt daneben einen eigenen Bau aus in die Seite. Die Regel fuer `select` oben trifft deshalb nur das unsichtbare Original -- sichtbar blieb der weisse, eckige Kasten von select2 mitten unter den Pillen. Hier bekommt der Nachbau dieselbe Pille. Die Liste zum Aufklappen haengt select2 nicht ins Formular, sondern an den . Sie steht darum im Abschnitt danach, ohne .woocommerce davor. */ body.woocommerce-account .woocommerce .select2-container--default .select2-selection--single { box-sizing : border-box; height : 38px; padding : 0; border : 1px solid var(--color-divider); border-radius : var(--radius-md); background : var(--color-surface); } body.woocommerce-account .woocommerce .select2-container--default .select2-selection--single:hover { border-color : color-mix(in srgb, var(--color-text) 45%, transparent); } /* Aufgeklappt und mit der Tastatur angesteuert wie ein Feld im Fokus. */ body.woocommerce-account .woocommerce .select2-container--default.select2-container--open .select2-selection--single, body.woocommerce-account .woocommerce .select2-container--default.select2-container--focus .select2-selection--single { border-color : var(--color-accent); } /* Zeilenhoehe statt Polster: 38px Pille minus die beiden Rahmen. So sitzt der Text mittig, ohne die Pille auseinanderzuziehen. `form .form-row` steht nur deshalb im Selektor, weil WooCommerce dem Text mit derselben Anzahl Klassen 0.9rem Polster oben und unten gibt (woocommerce-blocktheme.css, `.woocommerce-page form .form-row .select2-container ...`). Bei gleichem Gewicht entscheidet die Reihenfolge der Dateien, und die liegt hier nicht in unserer Hand -- das Polster machte den Text 65px hoch und schob ihn unten aus der Pille heraus. */ body.woocommerce-account .woocommerce form .form-row .select2-container--default .select2-selection--single .select2-selection__rendered { padding : 0 var(--space-3); line-height : 36px; color : var(--color-text); font-family : var(--font-body); font-size : 14px; } body.woocommerce-account .woocommerce .select2-container--default .select2-selection--single .select2-selection__placeholder { color : var(--color-neutral-600); } body.woocommerce-account .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { top : 0; right : var(--space-3); width : 16px; height : 36px; } /* Das Pfeilchen ist ein Hintergrundbild am -- dieselbe Feather-Form wie an der Kasse, dort aber schwarz. Neu in der Schriftfarbe der Beschriftungen. Die Farbe steht als %2382796a im Bild, weil eine data-URL keine Variablen auswertet -- wie beim Haken des Kaestchens weiter unten. */ body.woocommerce-account .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow b { background-image: url('data:image/svg+xml;utf8,'); } /* ── Die aufgeklappte Liste ────────────────────────────────────────────── select2 haengt sie an den und nicht in das Formular; ein Selektor mit .woocommerce davor griffe deshalb ins Leere. */ body.woocommerce-account .select2-dropdown { border : 1px solid var(--color-divider); border-radius : var(--radius-md); background : var(--color-surface); box-shadow : var(--shadow-md); overflow : hidden; } body.woocommerce-account .select2-search--dropdown .select2-search__field { box-sizing : border-box; padding : var(--space-2) var(--space-3); border : 1px solid var(--color-divider); border-radius : var(--radius-sm); background : var(--color-bg); color : var(--color-text); font-family : var(--font-body); font-size : 14px; } body.woocommerce-account .select2-container--default .select2-results__option { padding : var(--space-2) var(--space-3); color : var(--color-text); font-family : var(--font-body); font-size : 14px; } /* Der Eintrag unter dem Zeiger oder am Tastaturweg: volle Akzentfarbe, wie der offene Eintrag der Kontonavigation. */ body.woocommerce-account .select2-container--default .select2-results__option--highlighted[aria-selected], body.woocommerce-account .select2-container--default .select2-results__option--highlighted[data-selected] { background : var(--color-accent); color : var(--color-bg); } /* Der bereits gewaehlte Eintrag nur getoent -- er ist Zustand, nicht Ziel. */ body.woocommerce-account .select2-container--default .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted), body.woocommerce-account .select2-container--default .select2-results__option[data-selected="true"]:not(.select2-results__option--highlighted) { background : color-mix(in srgb, var(--color-text) 7%, transparent); color : var(--color-text); } /* Das Auge zum Aufdecken des Passworts liegt absolut im Feld. WooCommerce faerbt es schwarz und zeichnet beim Fokus einen eigenen dunklen Rahmen -- beides faellt aus dem Design. */ body.woocommerce-account .woocommerce form .password-input { width : 100%; } body.woocommerce-account .woocommerce form .show-password-input { color : var(--color-neutral-600); } body.woocommerce-account .woocommerce form .show-password-input:focus { outline : 2px solid var(--color-accent); } body.woocommerce-account .woocommerce form .show-password-input:hover { color : var(--color-text); } /* Die Zeile "Angemeldet bleiben" steht im selben Absatz wie der Knopf; dort sollen beide nebeneinander stehen, nicht untereinander wie die Felder. */ body.woocommerce-account .woocommerce form .form-row:has(> .woocommerce-form-login__rememberme) { flex-direction : row; flex-wrap : wrap; align-items : center; gap : var(--space-4); } body.woocommerce-account .woocommerce form .woocommerce-form__label-for-checkbox { display : inline-flex; align-items : center; gap : 8px; margin : 0; font-size : 14px; color : var(--color-text); cursor : pointer; } /* Dasselbe Kaestchen wie im Filter des Shops, siehe src/components/product-filter/style-index.css: warme Flaeche statt des weissen Standardkaestchens, gefuellt in der Akzentfarbe mit dem Haken des Design-Systems. appearance:none, weil der Browser sonst sein eigenes Kaestchen zeichnet und von den Angaben hier nur den Rahmen uebernimmt -- das Kaestchen blieb weiss. Im Filter liegt dieselbe Zeichnung im ::before der Beschriftung, weil die Checkbox dort ganz ausgeblendet ist; hier ist sie sichtbar und traegt sie selbst. */ body.woocommerce-account .woocommerce form .woocommerce-form__input-checkbox { appearance : none; box-sizing : border-box; width : 18px; height : 18px; min-height : 0; margin : 0; border : 1.5px solid var(--color-divider); border-radius : 6px; background : var(--color-bg); background-position: center; background-repeat : no-repeat; background-size : 12px 12px; cursor : pointer; } /* Der Haken ist Lucide "check" mit stroke-width 3, wie im Filter. Die Farbe steht als %23f5ead8 im Bild und nicht als var(--color-bg): in einer data-URL wertet der Browser keine Variablen aus. */ body.woocommerce-account .woocommerce form .woocommerce-form__input-checkbox:checked { border-color : var(--color-accent); background-color: var(--color-accent); background-image: url('data:image/svg+xml;utf8,'); } /* WooCommerce stellt den Knopf im Anmeldeformular vor das Kaestchen; im Mockup steht die Handlung rechts am Ende der Zeile. */ body.woocommerce-account .woocommerce form .woocommerce-form-login__submit { order : 2; } /* Ausgenommen sind die Verweise in den Meldungsstreifen. Sie gehoeren zum Streifen und nicht zum Konto -- ihr Aussehen steht in src/pages/notice/notice.css, wo es fuer den ganzen Shop gilt. Ohne die Ausnahme gewaenne die Regel hier (drei Klassen gegen dessen zwei), und aus dem unterstrichenen Verweis wurde ein Knopf in Titelschrift. :where in der Klammer, damit die Ausnahme das Gewicht des Selektors nicht veraendert: :not zaehlt sonst wie sein Inhalt mit, und die Regel schluege damit den schlichten Knopf der Bestellliste weiter unten -- in jeder Zeile staende dann ein Knopf in voller Akzentfarbe. */ body.woocommerce-account .woocommerce :is(button, input[type="submit"]).button:not(:where(.wc-block-components-notice-banner *)), body.woocommerce-account .woocommerce a.button:not(:where(.wc-block-components-notice-banner *)) { display : inline-flex; align-items : center; justify-content : center; width : auto; min-height : 38px; padding : var(--space-2) calc(var(--space-3) * 1.4); border : 1px solid transparent; border-radius : 999px; background : var(--color-accent); color : var(--color-bg); font-family : var(--font-title); font-weight : var(--font-title-weight); font-size : 14px; line-height : 1.2; text-decoration : none; cursor : pointer; } body.woocommerce-account .woocommerce :is(button, input[type="submit"]).button:hover, body.woocommerce-account .woocommerce a.button:hover { background : var(--color-accent-600); color : var(--color-bg); } /* Die Knoepfe in der Bestellliste ("Anzeigen") sind Zweitrang: sie stehen in jeder Zeile und duerfen die Tabelle nicht mit Akzentfarbe zupflastern. Dasselbe Polster wie an den Eintraegen der Kontonavigation: es sind die beiden einzigen Pillen der Seite, und nebeneinander fielen zwei verschiedene Groessen auf. `min-height: auto` nimmt die 38px des grossen Knopfes von oben zurueck -- hier soll allein das Polster die Hoehe bestimmen, sonst bliebe der Knopf hoeher als sein Inhalt. */ body.woocommerce-account .woocommerce-orders-table a.button, body.woocommerce-account .woocommerce-pagination a.button { border-color : var(--color-divider); background : transparent; color : var(--color-text); font-size : 13px; min-height : auto; padding : var(--space-2) var(--space-3); } /* Auf der Hoehe der Zeile, nicht darueber. WooCommerce stellt den Knopf in der Aktionsspalte auf `display: block` und gibt ihm `margin-bottom: 1em` (woocommerce-blocktheme.css) -- gedacht fuer mehrere Knoepfe, die auf schmalen Fenstern untereinander stehen. Auf breiten zog ihn das ueber die volle Spaltenbreite, und der Aussenabstand unten schob ihn aus der Mitte der Zeile nach oben: die Zelle zentriert ja den Knopf samt seinem Abstand, nicht den Knopf allein. Ohne beides ist er wieder so breit wie seine Beschriftung und sitzt auf der Schriftlinie der uebrigen Spalten. Drei Klassen und zwei Elemente hat die Regel von WooCommerce; die hier nennt zusaetzlich `body` und `.button`. */ body.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button { display : inline-flex; margin : 0; } body.woocommerce-account .woocommerce-orders-table a.button:hover, body.woocommerce-account .woocommerce-pagination a.button:hover { background : color-mix(in srgb, var(--color-text) 7%, transparent); color : var(--color-text); } body.woocommerce-account .woocommerce-LostPassword { margin : var(--space-3) 0 0; } body.woocommerce-account .woocommerce-LostPassword a { color : var(--color-accent-700); font-size : 14px; text-decoration : underline; text-underline-offset: 3px; } /* Hinweistext und Datenschutzhinweis im Registrierungsformular: Der Abstand entspricht der Vorgabe nach dem E-Mail-Eingabefeld (var(--space-3)), damit der Abstand zum Registrieren-Knopf genau dem Abstand nach dem E-Mail-Feld gleicht. */ body.woocommerce-account .woocommerce form.woocommerce-form-register :is(p:not(.form-row), .woocommerce-privacy-policy-text) { margin : 0 0 var(--space-3); } body.woocommerce-account .woocommerce form.woocommerce-form-register .woocommerce-privacy-policy-text p { margin : 0; } body.woocommerce-account .woocommerce form.woocommerce-form-register wc-order-attribution-inputs { display : none; } /* ── Kontodetails und Adressen ─────────────────────────────────────────── */ /* Die Vorlage gruppiert die Passwortfelder in einem
; ohne eigene Angaben zeichnet der Browser darum seinen grauen Standardrahmen. */ body.woocommerce-account .woocommerce fieldset { margin : var(--space-6) 0 var(--space-4); padding : var(--space-4) 0 0; border : 0; border-block-start : 1px solid var(--color-divider); } body.woocommerce-account .woocommerce legend { padding : 0; font-family : var(--font-title); font-weight : var(--font-title-weight); font-size : 18px; color : var(--color-text); } /* Vorname und Nachname stehen bei WooCommerce als Float nebeneinander. Als Raster brauchen sie kein clear und brechen auf dem Telefon von selbst. */ body.woocommerce-account .woocommerce form:has(> .form-row-first) { display : grid; grid-template-columns : repeat(auto-fit, minmax(220px, 1fr)); gap : 0 var(--space-4); max-width : 560px; } body.woocommerce-account .woocommerce form .form-row-first, body.woocommerce-account .woocommerce form .form-row-last { float : none; width : auto; } body.woocommerce-account .woocommerce form :is(.form-row-wide, fieldset, p:not(.form-row), .clear), body.woocommerce-account .woocommerce form > :is(button, .woocommerce-Button) { grid-column : 1 / -1; } body.woocommerce-account .woocommerce form .clear { display : none; } /* Die Adressuebersicht stellt Liefer- und Rechnungsadresse in zwei Spalten. Jede wird zur Karte des Design-Systems. */ body.woocommerce-account .woocommerce-Addresses { display : grid; grid-template-columns : repeat(auto-fit, minmax(260px, 1fr)); gap : var(--space-4); } body.woocommerce-account .woocommerce-Address { float : none; width : auto; padding : var(--space-4); border-radius : var(--radius-md); background : var(--color-surface); } body.woocommerce-account .woocommerce-Address-title { display : flex; align-items : baseline; justify-content : space-between; gap : var(--space-3); margin-bottom : var(--space-2); } body.woocommerce-account .woocommerce-Address-title h2, body.woocommerce-account .woocommerce-Address-title h3 { margin : 0; font-family : var(--font-title); font-weight : var(--font-title-weight); font-size : 16px; } body.woocommerce-account .woocommerce-Address-title a.edit { color : var(--color-accent-700); font-size : 13px; text-decoration : underline; text-underline-offset: 3px; } body.woocommerce-account .woocommerce-Address address { font-style : normal; font-size : 14px; line-height : 1.6; color : var(--color-neutral-800); } /* Am Fuss einer Bestellansicht stehen dieselben beiden Adressen noch einmal. WooCommerce stellt sie als Floats nebeneinander, und weil die Rechnungsadresse eine Zeile mit der E-Mail mehr traegt, waren die beiden Kaesten unterschiedlich hoch. Als Raster sind die Spalten gleich hoch -- auto-fit wie in der Adressuebersicht, damit sie auf schmalen Fenstern untereinander rutschen. */ body.woocommerce-account .woocommerce-columns--addresses { display : grid; grid-template-columns : repeat(auto-fit, minmax(260px, 1fr)); gap : var(--space-4); } body.woocommerce-account .woocommerce-columns--addresses > .woocommerce-column { display : flex; flex-direction : column; float : none; width : auto; } /* Die Karte fuellt aus, was die Spalte an Hoehe vorgibt -- erst dadurch sind die beiden Adressen wirklich gleich hoch und nicht nur ihre Spalten. */ body.woocommerce-account .woocommerce-columns--addresses address { flex : 1; } /* Dieselbe Karte wie in der Adressuebersicht, damit eine Adresse im Konto ueberall gleich aussieht. WooCommerce gibt dem
sonst seinen Standardkasten: 5px Rundung, Rahmen, kein Grund. */ body.woocommerce-account .woocommerce-customer-details address { padding : var(--space-4); border : none; border-radius : var(--radius-md); background : var(--color-surface); font-style : normal; font-size : 14px; line-height : 1.6; color : var(--color-neutral-800); } /* ── Bestellungen und Downloads ───────────────────────────────────────── Die .table des Design-Systems. WooCommerce stellt die Tabelle unter 768px selbst auf Zeilen um (woocommerce-smallscreen.css) und blendet dabei die Kopfzeile aus -- das bleibt so, nur die Farben kommen von hier. */ /* Nur der Abstand nach unten wird genullt; den nach oben setzt der Rhythmus des Inhaltsbereichs weiter oben. Stuende hier `margin: 0`, schluege das ihn -- die Tabelle klebte am Absatz darueber. */ /* `separate` statt `collapse`, und der Abstand zwischen den Zellen auf null: bei zusammengelegten Raendern wirft der Browser border-radius an einer Zelle weg, und der Fuss weiter unten soll die Rundung der uebrigen Bloecke tragen. Sichtbar aendert das sonst nichts -- die Zeilen hier ziehen ihre Linie nur unten, es gibt also keine Raender, die zusammenfallen koennten. */ body.woocommerce-account .woocommerce table.shop_table { width : 100%; margin-block-end : 0; margin-inline : 0; border : 0; border-collapse : separate; border-spacing : 0; border-radius : 0; font-size : 14px; } body.woocommerce-account .woocommerce table.shop_table th { padding : var(--space-2); border : 0; border-bottom : 1px solid var(--color-divider); background : transparent; color : var(--color-neutral-600); font-family : var(--font-body); font-weight : 400; font-size : 11px; letter-spacing: 0.08em; text-transform: uppercase; text-align : left; } body.woocommerce-account .woocommerce table.shop_table td { padding : var(--space-3) var(--space-2); border : 0; border-bottom : 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); color : var(--color-text); } /* Die Bestellnummer ist ein Wert, keine Ueberschrift. In der Bestellliste steht sie nicht in einem , sondern in einem -- WooCommerce zeichnet damit aus, dass die Zelle ihre Zeile benennt (myaccount/orders.php). Die Regel fuer die Kopfzeile darueber trifft aber jedes der Tabelle, und so stand die Nummer als einzige Angabe der Zeile klein, gesperrt und in Versalien da, mit dem knapperen Polster einer Ueberschrift. Gelesen wird sie wie Datum, Status und Betrag daneben. `font-size: inherit` holt die 14px der Tabelle zurueck, statt sie hier noch einmal zu nennen. Der Fuss der Bestellansicht bleibt aussen vor: dort benennt ein tatsaechlich eine Zeile ("Zwischensumme:") und behaelt seine Auszeichnung. */ body.woocommerce-account .woocommerce table.shop_table tbody th { padding : var(--space-3) var(--space-2); border-bottom : 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); color : var(--color-text); font-size : inherit; letter-spacing : normal; text-transform : none; } body.woocommerce-account .woocommerce table.shop_table tbody tr:hover { background : color-mix(in srgb, var(--color-text) 4%, transparent); } /* ── Die Zusammenfassung unter den Positionen ──────────────────────────── Im der Bestellansicht stehen Zwischensumme, Versand, Gesamt und die Angaben zur Bestellung. Mit denselben Zeilenlinien wie darueber las sich das als Fortsetzung der Artikelliste. Es bekommt deshalb die warme Flaeche der Karten und eine kraeftige Linie darueber -- so steht die Summe als eigener Block unter den Positionen, wie die Uebersicht neben der Kasse. Die Zeilen darin tragen keine eigenen Linien mehr: der Block soll als einer lesen. Die Tabelle der Bestellliste hat keinen , die Regeln greifen also nur hier. */ body.woocommerce-account .woocommerce table.shop_table tfoot :is(th, td) { padding-block : var(--space-2); border-bottom : none; background : var(--color-surface); } /* Die Karte trennt sich allein durch ihre Flaeche und ihre Rundung von der Liste darueber ab -- ohne Linie, wie das Design-System es vorzieht. Die Regel haengt an der ersten Zeile des Fusses und nicht an einer festen Zeilennummer, damit der Abstand auch bei einer Bestellung ohne Versandzeile oder mit zusaetzlichen Rabattzeilen oben sitzt. */ body.woocommerce-account .woocommerce table.shop_table tfoot tr:first-child :is(th, td) { padding-block-start : var(--space-3); } body.woocommerce-account .woocommerce table.shop_table tfoot tr:last-child :is(th, td) { padding-block-end : var(--space-3); } /* Die Linie der letzten Artikelzeile liefe unmittelbar an der Oberkante der Karte entlang und laege dort quer ueber deren Rundung. Die untere Zeile der Liste gibt sie deshalb ab -- aber nur in einer Tabelle, die ueberhaupt einen Fuss hat: in der Bestellliste schliesst dieselbe Linie die Aufzaehlung nach unten ab. */ body.woocommerce-account .woocommerce table.shop_table:has(tfoot) tbody tr:last-child :is(th, td) { border-bottom : none; } /* Die Rundung der uebrigen Bloecke, damit der Fuss als Karte unter der Liste steht und nicht als angeschnittenes Band. Die Ecken sitzen an den vier aeusseren Zellen; `> :first-child` und `> :last-child` statt th und td, weil die Beschriftung links ein ist und der Wert rechts ein . */ body.woocommerce-account .woocommerce table.shop_table tfoot tr:first-child > :first-child { border-start-start-radius : var(--radius-md); } body.woocommerce-account .woocommerce table.shop_table tfoot tr:first-child > :last-child { border-start-end-radius : var(--radius-md); } body.woocommerce-account .woocommerce table.shop_table tfoot tr:last-child > :first-child { border-end-start-radius : var(--radius-md); } body.woocommerce-account .woocommerce table.shop_table tfoot tr:last-child > :last-child { border-end-end-radius : var(--radius-md); } /* Der Innenabstand der Karte: aussen so viel wie oben und unten, damit die Rundung nicht in den Text schneidet. */ body.woocommerce-account .woocommerce table.shop_table tfoot tr > :first-child { padding-inline-start : var(--space-3); } body.woocommerce-account .woocommerce table.shop_table tfoot tr > :last-child { padding-inline-end : var(--space-3); } /* Die Betraege rechts sind das, was man hier sucht. */ body.woocommerce-account .woocommerce table.shop_table tfoot td { font-weight : 600; } /* Der Steuerhinweis hinter der Gesamtsumme ist Beiwerk und keine zweite Zahl. Ihn traegt WooCommerce als einziges Element im Fuss in einem . */ body.woocommerce-account .woocommerce table.shop_table tfoot td small { font-size : 12px; font-weight : 400; color : var(--color-neutral-600); } /* In der gestapelten Fassung schreibt WooCommerce die Spaltenueberschrift als `content: attr(data-title)` vor den Wert und stellt sie fett. Sie soll dort so blass stehen wie die Kopfzeile auf breiten Fenstern. Ohne eigenen Umschaltpunkt: das Stylesheet, das den Text erzeugt (woocommerce-smallscreen.css), haengt selbst an `max-width: 768px` -- darueber erzeugt das Pseudoelement nichts, was zu faerben waere. */ body.woocommerce-account .woocommerce table.shop_table td::before { color : var(--color-neutral-600); font-weight : 400; } body.woocommerce-account .woocommerce table.shop_table a:not(.button) { color : var(--color-accent-700); text-decoration : underline; text-underline-offset: 3px; } body.woocommerce-account .woocommerce-pagination { display : flex; gap : var(--space-3); margin-top: var(--space-4); } /* ── Meldungen: die alte Fassung ───────────────────────────────────────── Die Meldungen, die im Konto wirklich erscheinen, sind Bloecke (.wc-block-components-notice-banner) -- WooCommerce baut sie in einem Block-Theme auch dort so, wo der Shortcode sie ausgibt. Ihr Aussehen steht deshalb fuer den ganzen Shop in src/pages/notice/notice.css. Was hier folgt, ist der Rueckfall auf die alten Vorlagen (woocommerce/templates/notices): einfache
und
. Ein Plugin, das wc_print_notice() direkt aufruft, kann sie noch erzeugen; ohne diese Regeln staende dann ein graublauer Kasten von WooCommerce in der Seite. Gesehen wurde das hier nicht -- die Regeln sind Vorsorge, kein Nachbau von etwas Beobachtetem. */ body.woocommerce-account .woocommerce :is(.woocommerce-error, .woocommerce-info, .woocommerce-message) { display : flex; flex-wrap : wrap; align-items : center; gap : var(--space-3); margin : 0 0 var(--space-4); padding : var(--space-3) var(--space-4); border : 1px solid transparent; border-radius : var(--radius-md); list-style : none; font-size : 14px; line-height : 1.4; } /* Das Zeichen der Meldung steht bei WooCommerce als Symbolschrift in einem absolut gesetzten Pseudoelement und lag damit auf dem ersten Buchstaben. Als eigenes Feld der Zeile steht es davor -- wie das Symbol der Block-Meldungen im Shop (notice.css). */ body.woocommerce-account .woocommerce :is(.woocommerce-error, .woocommerce-info, .woocommerce-message)::before { position : static; flex : none; margin : 0; font-size : 18px; line-height : 1; } body.woocommerce-account .woocommerce :is(.woocommerce-info, .woocommerce-message) { border-color : var(--color-accent-2-300); background : var(--color-accent-2-100); color : var(--color-text); } body.woocommerce-account .woocommerce :is(.woocommerce-info, .woocommerce-message)::before { color : var(--color-accent-2-600); } /* Dasselbe Rot wie bei den Block-Meldungen (notice.css): das Design-System kennt keines, ein Fehler muss aber als solcher zu erkennen sein. */ body.woocommerce-account .woocommerce .woocommerce-error { --notice-error : #9c3524; --notice-error-soft: #fbeae6; border-color : color-mix(in srgb, var(--notice-error) 35%, transparent); background : var(--notice-error-soft); color : var(--color-text); } body.woocommerce-account .woocommerce .woocommerce-error::before { color : var(--notice-error); } /* Die Fehlermeldung ist eine Liste; ihre Eintraege sollen unter dem Zeichen als Zeilen stehen und nicht daneben. */ body.woocommerce-account .woocommerce .woocommerce-error li { flex : 1 1 auto; margin : 0; padding : 0; } /* Der Verweis in einer Meldung ("Passwort vergessen?", "zur Kasse") ist im Mockup Text mit Unterstrich und kein zweiter Knopf. */ body.woocommerce-account .woocommerce :is(.woocommerce-error, .woocommerce-info, .woocommerce-message) .button { margin-left : auto; min-height : 0; padding : 0; border : none; background : none; color : inherit; font-family : var(--font-body); font-size : 14px; font-weight : 400; text-decoration : underline; white-space : nowrap; } body.woocommerce-account .woocommerce :is(.woocommerce-error, .woocommerce-info, .woocommerce-message) .button:hover { background : none; color : inherit; } /* ══ Schmale Fenster ════════════════════════════════════════════════════ */ /* Derselbe Rand wie bei Fusszeile und Shop-Raster. Der Abstand oben und unten braucht das Ausrufezeichen ein zweites Mal: dagegen steht dasselbe style-Attribut der Vorlage wie oben, und ohne bliebe es bei dessen 70px. */ @media (max-width: 959px) { body.page main > .wp-block-group, body.single-post main > .wp-block-group { gap : var(--space-4); padding-block : 0 var(--space-4) !important; padding-inline : var(--space-3); } } /* Anmeldung und Registrierung auf schmalen Bildschirmen (Mobile) nach wie vor untereinander statt nebeneinander, zentriert auf Formularbreite. */ @media (max-width: 768px) { body.woocommerce-account main > .wp-block-group:has(.u-columns.col2-set) > * { max-width : 420px; } body.woocommerce-account .u-columns.col2-set { grid-template-columns : 1fr; } } /* Unter der Breite, ab der neben der Kontokarte nichts Sinnvolles mehr Platz hat, wandert die Navigation ueber den Inhalt. */ @media (max-width: 600px) { body.page .wp-block-post-title, body.single-post .wp-block-post-title { font-size : 26px; } body.page .entry-content > * + :is(h2, h3, h4, h5, h6), body.single-post .entry-content > * + :is(h2, h3, h4, h5, h6) { margin-block-start : var(--space-6); } body.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) { grid-template-columns : 1fr; gap : var(--space-4); } /* Als Zeile ueber dem Inhalt statt als Liste: sieben Eintraege untereinander schoeben den Inhalt sonst weit nach unten. */ body.woocommerce-account .woocommerce-MyAccount-navigation ul { flex-direction : row; flex-wrap : wrap; gap : var(--space-1); } }