/**
* R.E.SET Account Mobile — Mobile-Only Rules (gewrappt im @media-Block)
*/
@media (max-width: 1024px) {
/* ===== Layout-Reset: WC-Spalten werden Vollbild ===== */
body.reset-acc-mobile .woocommerce-MyAccount-navigation,
body.reset-acc-mobile .woocommerce-MyAccount-content,
body.reset-acc-mobile [class*="MyAccount-navigation"],
body.reset-acc-mobile [class*="MyAccount-content"] {
float: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Typografie-Stack fuer natives Feel */
body.reset-acc-mobile .woocommerce-MyAccount-navigation,
body.reset-acc-mobile .woocommerce-MyAccount-content {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
color: var(--reset-acc-dark-earth);
}
/* Kein Tap-Highlight — wir steuern das Feedback selbst */
body.reset-acc-mobile a,
body.reset-acc-mobile button,
body.reset-acc-mobile .reset-acc-topbar * {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
/* =========================================================
VIEW: MENU (Dashboard) — nur Menue sichtbar
========================================================= */
body.reset-acc-view-menu .woocommerce-MyAccount-content {
display: none !important;
}
body.reset-acc-view-menu .woocommerce-MyAccount-navigation {
display: block !important;
background: var(--reset-acc-bg);
animation: resetAccSlideIn 0.22s ease-out;
padding: 8px 0 calc(24px + env(safe-area-inset-bottom, 0px));
}
body.reset-acc-view-menu .woocommerce-MyAccount-navigation ul,
body.reset-acc-view-menu .woocommerce-MyAccount-navigation ol {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
body.reset-acc-view-menu .woocommerce-MyAccount-navigation ul li,
body.reset-acc-view-menu .woocommerce-MyAccount-navigation ol li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent;
position: relative;
}
/* Doppelter Abstand ueber dem ersten Menuepunkt (Rechnungen) */
body.reset-acc-view-menu .woocommerce-MyAccount-navigation > ul > li:first-child {
margin-top: 48px !important;
}
/* Divider zwischen Items — startet nach dem Icon (56px), iOS-Style */
body.reset-acc-view-menu .woocommerce-MyAccount-navigation ul li + li::before {
content: "";
position: absolute;
top: 0;
left: 56px;
right: 0;
height: 1px;
background: var(--reset-acc-divider);
transform: scaleY(0.5);
transform-origin: top;
}
/* Row: Icon absolut links (konstanter Text-Offset, unabhaengig vom inneren Markup;
WC-Anker haben Leading-Whitespace, der sonst Text im Vergleich zu Accordion-Toggles verschiebt) */
body.reset-acc-view-menu .woocommerce-MyAccount-navigation ul li a {
display: flex !important;
align-items: center;
gap: 0;
width: 100%;
min-height: var(--reset-acc-row-h);
padding: 12px 16px 12px 56px !important;
position: relative;
font-size: 16px;
line-height: 1.25;
font-weight: 500;
color: var(--reset-acc-dark-earth) !important;
text-decoration: none !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
transition: background-color 0.15s ease;
}
body.reset-acc-view-menu .woocommerce-MyAccount-navigation ul li a:active {
background-color: var(--reset-acc-terracotta-soft) !important;
}
/* Aktiver Eintrag: leicht fetter + Terracotta-Akzent links */
body.reset-acc-view-menu .woocommerce-MyAccount-navigation ul li.is-active > a {
font-weight: 600;
color: var(--reset-acc-terracotta) !important;
}
body.reset-acc-view-menu .woocommerce-MyAccount-navigation ul li.is-active > a::before {
color: var(--reset-acc-terracotta);
}
/* Icon links — absolut positioniert (konstanter Text-Offset) */
body.reset-acc-view-menu .woocommerce-MyAccount-navigation ul li a::before {
content: "";
display: block;
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
background-color: var(--reset-acc-warm-taupe);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Chevron rechts */
body.reset-acc-view-menu .woocommerce-MyAccount-navigation ul li a::after {
content: "";
display: block;
width: 16px;
height: 16px;
flex-shrink: 0;
margin-left: auto;
background-color: var(--reset-acc-chevron);
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* =========================================================
ICON-MAP — Endpoint-spezifische SVGs (Heroicons-outline)
Gesteuert ueber die reset-acc-icon--{slug}-Klassen, die der
woocommerce_account_menu_item_classes-Filter auf jedes setzt.
========================================================= */
body.reset-acc-view-menu .reset-acc-icon--home > a::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
body.reset-acc-view-menu .reset-acc-icon--receipt > a::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
body.reset-acc-view-menu .reset-acc-icon--download > a::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
body.reset-acc-view-menu .reset-acc-icon--map-pin > a::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
body.reset-acc-view-menu .reset-acc-icon--credit-card > a::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
body.reset-acc-view-menu .reset-acc-icon--user > a::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
body.reset-acc-view-menu .reset-acc-icon--users > a::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
body.reset-acc-view-menu .reset-acc-icon--logout > a::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
body.reset-acc-view-menu .reset-acc-icon--calendar > a::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
body.reset-acc-view-menu .reset-acc-icon--repeat > a::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
body.reset-acc-view-menu .reset-acc-icon--award > a::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
body.reset-acc-view-menu .reset-acc-icon--ticket > a::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
body.reset-acc-view-menu .reset-acc-icon--percent > a::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
body.reset-acc-view-menu .reset-acc-icon--shield > a::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
body.reset-acc-view-menu .reset-acc-icon--wallet > a::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
body.reset-acc-view-menu .reset-acc-icon--chart > a::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
body.reset-acc-view-menu .reset-acc-icon--trash > a::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Trash rot (destructive, iOS-Konvention wie Logout) */
body.reset-acc-mobile.reset-acc-view-menu .reset-acc-icon--trash > a,
body.reset-acc-mobile.reset-acc-view-menu .reset-acc-icon--trash > a::before {
color: var(--reset-acc-terracotta) !important;
}
body.reset-acc-mobile.reset-acc-view-menu .reset-acc-icon--trash > a::before {
background-color: var(--reset-acc-terracotta) !important;
}
/* Default-Icon (3 Dots) fuer unbekannte Endpoints */
body.reset-acc-view-menu .reset-acc-icon--default > a::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Logout rot akzentuieren (iOS-Konvention fuer destructive actions) */
body.reset-acc-mobile.reset-acc-view-menu .reset-acc-icon--logout > a,
body.reset-acc-mobile.reset-acc-view-menu .reset-acc-icon--logout > a::before {
color: var(--reset-acc-terracotta) !important;
}
body.reset-acc-mobile.reset-acc-view-menu .reset-acc-icon--logout > a::before {
background-color: var(--reset-acc-terracotta) !important;
}
/* =========================================================
LOGOUT-BUTTON
Wird per JS aus der Nav- herausgezogen und ans Ende
des Nav-Containers (nach der ) eingefuegt.
========================================================= */
body.reset-acc-view-menu .woocommerce-MyAccount-navigation .reset-acc-logout-btn,
body.reset-acc-view-menu [class*="MyAccount-navigation"] .reset-acc-logout-btn {
display: flex !important;
align-items: center;
justify-content: center;
/* 1.5 leere Zeilen Abstand zum letzten Menuepunkt darueber */
margin: calc(var(--reset-acc-row-h) * 1.5) 16px 16px;
padding: 10px 20px;
min-height: 44px;
font-size: 15px;
font-weight: 600;
color: var(--reset-acc-terracotta) !important;
background: var(--reset-acc-terracotta-soft);
border: 1.5px solid var(--reset-acc-terracotta);
border-radius: 22px;
text-decoration: none !important;
text-align: center;
transition: background-color 0.15s ease;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
body.reset-acc-view-menu .woocommerce-MyAccount-navigation .reset-acc-logout-btn:active {
background: rgba(183, 74, 50, 0.15) !important;
}
/* =========================================================
BLOCKSY ACCOUNT WELCOME — Person-Icon + Fettschrift
Gilt auf allen Account-Seiten (Menu- UND Content-View)
========================================================= */
body.reset-acc-mobile .ct-account-welcome {
padding: 14px 20px 12px;
}
body.reset-acc-view-menu .ct-account-welcome {
border-bottom: 1px solid var(--reset-acc-divider);
}
body.reset-acc-mobile .ct-account-user-box {
font-size: 17px;
font-weight: 700;
color: var(--reset-acc-dark-earth);
line-height: 1.3;
}
/* Person-Icon vor dem Namen */
body.reset-acc-mobile .ct-account-user-box::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
vertical-align: middle;
margin-right: 8px;
margin-bottom: 3px;
background-color: var(--reset-acc-dark-earth);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
}
/* "Konto / Abmelden"-Links verstecken */
body.reset-acc-mobile .ct-account-user-box > span,
body.reset-acc-mobile .ct-account-user-box > a {
display: none !important;
}
/* =========================================================
ACCORDION GROUPS
========================================================= */
/* Accordion-- : kein top-Divider (der kommt vom Kind) */
body.reset-acc-view-menu .woocommerce-MyAccount-navigation ul li.reset-acc-accordion::before {
display: none !important;
}
/* Toggle-Button: identischer Layout-Stack wie die -Zeilen (Icon absolut) */
body.reset-acc-view-menu .reset-acc-accordion .reset-acc-accordion__toggle {
display: flex !important;
align-items: center;
gap: 0;
width: 100%;
min-height: var(--reset-acc-row-h);
padding: 12px 16px 12px 56px;
position: relative;
font-size: 16px;
line-height: 1.25;
font-weight: 500;
color: var(--reset-acc-dark-earth);
text-align: left;
background: transparent;
border: none;
box-shadow: none;
cursor: pointer;
transition: background-color 0.15s ease;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
}
body.reset-acc-view-menu .reset-acc-accordion .reset-acc-accordion__toggle:active {
background-color: var(--reset-acc-terracotta-soft);
}
/* Icon links (::before) — absolut positioniert wie bei den -Zeilen */
body.reset-acc-view-menu .reset-acc-accordion .reset-acc-accordion__toggle::before {
content: "";
display: block;
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
background-color: var(--reset-acc-warm-taupe);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Chevron-Down fuer Accordion (statt Chevron-Right) */
body.reset-acc-view-menu .reset-acc-accordion .reset-acc-accordion__toggle::after {
content: "";
display: block;
width: 16px;
height: 16px;
flex-shrink: 0;
margin-left: auto;
background-color: var(--reset-acc-chevron);
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
transition: transform 0.2s ease;
}
/* Chevron rotiert wenn aufgeklappt */
body.reset-acc-view-menu .reset-acc-accordion .reset-acc-accordion__toggle[aria-expanded="true"]::after {
transform: rotate(180deg);
}
/* Calendar-Icon fuer "Meine Termine" */
body.reset-acc-view-menu .reset-acc-icon--calendar.reset-acc-accordion .reset-acc-accordion__toggle::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Gear/Sliders-Icon fuer "Einstellungen" (Heroicons adjustments-horizontal) */
body.reset-acc-view-menu .reset-acc-icon--gear.reset-acc-accordion .reset-acc-accordion__toggle::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Aktives Accordion (ein Kind ist aktiv) — Farbe kommt aus Gruppen-Regeln unten */
body.reset-acc-view-menu .reset-acc-accordion--active > .reset-acc-accordion__toggle {
font-weight: 600;
}
/* Sub-Liste */
body.reset-acc-view-menu .reset-acc-accordion__sub {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
background: rgba(0, 0, 0, 0.015);
}
body.reset-acc-view-menu .reset-acc-accordion__sub--closed {
display: none !important;
}
/* Sub-Item-Links: eingerueckt, kleinere Schrift, kein Icon, kein Chevron */
body.reset-acc-view-menu .reset-acc-accordion__sub li a {
padding-left: 56px !important;
font-size: 15px !important;
font-weight: 400 !important;
min-height: 48px !important;
color: var(--reset-acc-warm-taupe) !important;
}
body.reset-acc-view-menu .reset-acc-accordion__sub li a::before,
body.reset-acc-view-menu .reset-acc-accordion__sub li a::after {
display: none !important;
}
/* Aktives Sub-Item */
body.reset-acc-view-menu .reset-acc-accordion__sub li.is-active > a {
font-weight: 600 !important;
color: var(--reset-acc-terracotta) !important;
}
/* Divider zwischen Sub-Items (gleicher Stil wie Top-Level) */
body.reset-acc-view-menu .reset-acc-accordion__sub li + li::before {
content: "";
position: absolute;
top: 0;
left: 56px;
right: 0;
height: 1px;
background: var(--reset-acc-divider);
transform: scaleY(0.5);
transform-origin: top;
}
/* =========================================================
DRILL-DOWN-MODUS (.reset-acc-in-group auf Nav-Element)
Nur die aktive Gruppe ist sichtbar — eine Ebene zur Zeit.
========================================================= */
/* Alle Top-Level-Items ausblenden bis auf das aktive Accordion */
body.reset-acc-view-menu .woocommerce-MyAccount-navigation.reset-acc-in-group > ul > li:not(.reset-acc-accordion--active),
body.reset-acc-view-menu [class*="MyAccount-navigation"].reset-acc-in-group > ul > li:not(.reset-acc-accordion--active) {
display: none !important;
}
/* Logout-Button im Drill-Down ausblenden */
body.reset-acc-view-menu .woocommerce-MyAccount-navigation.reset-acc-in-group > .reset-acc-logout-btn,
body.reset-acc-view-menu [class*="MyAccount-navigation"].reset-acc-in-group > .reset-acc-logout-btn {
display: none !important;
}
/* Sub-Liste immer anzeigen wenn im Drill-Down */
body.reset-acc-view-menu .reset-acc-in-group .reset-acc-accordion--active > .reset-acc-accordion__sub {
display: block !important;
background: transparent;
}
/* Accordion-Toggle wird zum Abschnitts-Header + Zurueck-Button */
body.reset-acc-view-menu .reset-acc-in-group .reset-acc-accordion--active > .reset-acc-accordion__toggle {
font-size: 18px;
font-weight: 700;
letter-spacing: -0.01em;
border-bottom: 1px solid var(--reset-acc-divider-strong);
padding-bottom: 14px;
margin-bottom: 2px;
}
/* Chevron-Down → Chevron-Left (Zurueck-Pfeil) */
body.reset-acc-view-menu .reset-acc-in-group .reset-acc-accordion--active > .reset-acc-accordion__toggle::after {
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
transform: none !important;
}
/* Sub-Items im Drill-Down: volle Groesse wie Top-Level-Items
(padding-left 56px laesst Platz fuer absolut positionierte Icons) */
body.reset-acc-view-menu .reset-acc-in-group .reset-acc-accordion__sub li a {
padding-left: 56px !important;
font-size: 16px !important;
font-weight: 500 !important;
min-height: var(--reset-acc-row-h) !important;
}
/* Icons und Chevrons wieder einblenden */
body.reset-acc-view-menu .reset-acc-in-group .reset-acc-accordion__sub li a::before {
display: block !important;
}
body.reset-acc-view-menu .reset-acc-in-group .reset-acc-accordion__sub li a::after {
display: block !important;
}
/* Sub-Item-Farben je Gruppe */
/* ── Meine Termine — Dunkelblau ── */
body.reset-acc-view-menu .reset-acc-in-group .reset-acc-icon--calendar .reset-acc-accordion__sub li a {
color: #1c3f5e !important;
}
body.reset-acc-view-menu .reset-acc-in-group .reset-acc-icon--calendar .reset-acc-accordion__sub li a::before,
body.reset-acc-view-menu .reset-acc-in-group .reset-acc-icon--calendar .reset-acc-accordion__sub li a::after {
background-color: #1c3f5e !important;
}
/* ── Meine Abos & Kurse — Blau ── */
body.reset-acc-view-menu .reset-acc-in-group .reset-acc-icon--bookmark .reset-acc-accordion__sub li a {
color: #2464a8 !important;
}
body.reset-acc-view-menu .reset-acc-in-group .reset-acc-icon--bookmark .reset-acc-accordion__sub li a::before,
body.reset-acc-view-menu .reset-acc-in-group .reset-acc-icon--bookmark .reset-acc-accordion__sub li a::after {
background-color: #2464a8 !important;
}
/* ── Meine Vorteile — Orange ── */
body.reset-acc-view-menu .reset-acc-in-group .reset-acc-icon--gift .reset-acc-accordion__sub li a {
color: #c2721a !important;
}
body.reset-acc-view-menu .reset-acc-in-group .reset-acc-icon--gift .reset-acc-accordion__sub li a::before,
body.reset-acc-view-menu .reset-acc-in-group .reset-acc-icon--gift .reset-acc-accordion__sub li a::after {
background-color: #c2721a !important;
}
/* ── Einstellungen — Grün ── */
body.reset-acc-view-menu .reset-acc-in-group .reset-acc-icon--gear .reset-acc-accordion__sub li a {
color: #2d7a50 !important;
}
body.reset-acc-view-menu .reset-acc-in-group .reset-acc-icon--gear .reset-acc-accordion__sub li a::before,
body.reset-acc-view-menu .reset-acc-in-group .reset-acc-icon--gear .reset-acc-accordion__sub li a::after {
background-color: #2d7a50 !important;
}
/* ── Konto loeschen (destructive) — knallrote Schrift, normaler Hintergrund ── */
body.reset-acc-view-menu .reset-acc-in-group .reset-acc-accordion__sub li.reset-acc-icon--trash > a {
color: #e30000 !important;
font-weight: 600 !important;
}
body.reset-acc-view-menu .reset-acc-in-group .reset-acc-accordion__sub li.reset-acc-icon--trash > a::before,
body.reset-acc-view-menu .reset-acc-in-group .reset-acc-accordion__sub li.reset-acc-icon--trash > a::after {
background-color: #e30000 !important;
}
/* Aktives Sub-Item: dicker */
body.reset-acc-view-menu .reset-acc-in-group .reset-acc-accordion__sub li.is-active > a {
font-weight: 700 !important;
}
/* =========================================================
SEPARATOR-ITEMS (.reset-acc-separator)
Werden per PHP-Filter als _sep_N-Slugs ins Menue eingefuegt
und via JS/CSS zu unsichtbaren Abstandshaltern.
========================================================= */
body.reset-acc-view-menu .woocommerce-MyAccount-navigation ul li.reset-acc-separator {
min-height: 0 !important;
height: 14px;
pointer-events: none;
}
body.reset-acc-view-menu .woocommerce-MyAccount-navigation ul li.reset-acc-separator > a {
display: none !important;
}
/* Kein Divider-Strich vor und nach dem Separator */
body.reset-acc-view-menu .woocommerce-MyAccount-navigation ul li.reset-acc-separator::before,
body.reset-acc-view-menu .woocommerce-MyAccount-navigation ul li.reset-acc-separator + li::before {
display: none !important;
}
/* =========================================================
ACCORDION-GRUPPEN — Farben (immer aktiv, nicht nur on-active)
Hoehre Spezifitaet (4 Klassen) als die terracotta active-Regel.
========================================================= */
/* ── Meine Termine — Dunkelblau ── */
body.reset-acc-view-menu .reset-acc-icon--calendar.reset-acc-accordion > .reset-acc-accordion__toggle {
color: #1c3f5e;
}
body.reset-acc-view-menu .reset-acc-icon--calendar.reset-acc-accordion > .reset-acc-accordion__toggle::before {
background-color: #1c3f5e;
}
body.reset-acc-view-menu .reset-acc-icon--calendar.reset-acc-accordion > .reset-acc-accordion__toggle::after {
background-color: #1c3f5e;
}
/* ── Meine Abos & Kurse — Blau + Bookmark-Icon ── */
body.reset-acc-view-menu .reset-acc-icon--bookmark.reset-acc-accordion > .reset-acc-accordion__toggle {
color: #2464a8;
}
body.reset-acc-view-menu .reset-acc-icon--bookmark.reset-acc-accordion > .reset-acc-accordion__toggle::before {
background-color: #2464a8;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
body.reset-acc-view-menu .reset-acc-icon--bookmark.reset-acc-accordion > .reset-acc-accordion__toggle::after {
background-color: #2464a8;
}
/* ── Meine Vorteile — Orange + Gift-Icon ── */
body.reset-acc-view-menu .reset-acc-icon--gift.reset-acc-accordion > .reset-acc-accordion__toggle {
color: #c2721a;
}
body.reset-acc-view-menu .reset-acc-icon--gift.reset-acc-accordion > .reset-acc-accordion__toggle::before {
background-color: #c2721a;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
body.reset-acc-view-menu .reset-acc-icon--gift.reset-acc-accordion > .reset-acc-accordion__toggle::after {
background-color: #c2721a;
}
/* ── Einstellungen — Grün ── */
body.reset-acc-view-menu .reset-acc-icon--gear.reset-acc-accordion > .reset-acc-accordion__toggle {
color: #2d7a50;
}
body.reset-acc-view-menu .reset-acc-icon--gear.reset-acc-accordion > .reset-acc-accordion__toggle::before {
background-color: #2d7a50;
/* mask-image ist bereits in der Regel weiter oben gesetzt */
}
body.reset-acc-view-menu .reset-acc-icon--gear.reset-acc-accordion > .reset-acc-accordion__toggle::after {
background-color: #2d7a50;
}
/* =========================================================
VIEW: CONTENT (Endpoint) — nur Content sichtbar
========================================================= */
body.reset-acc-view-content .woocommerce-MyAccount-navigation {
display: none !important;
}
body.reset-acc-view-content .woocommerce-MyAccount-content {
display: block !important;
animation: resetAccSlideIn 0.25s ease-out;
}
/* Sticky Back-Header — Mobile-Override des Desktop-Defaults in account-mobile.css.
!important ueberall, weil das Base-CSS einen 2px-Akzent-Border + 22px-Title +
24px-Margin setzt, die hier auf Mobile nicht erwuenscht sind. */
.reset-acc-topbar {
display: flex !important;
align-items: center;
position: sticky;
top: 0;
z-index: 100;
min-height: var(--reset-acc-topbar-h);
padding: 0 8px !important;
padding-top: env(safe-area-inset-top, 0px) !important;
background: rgba(255, 255, 255, 0.92);
-webkit-backdrop-filter: saturate(180%) blur(12px);
backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--reset-acc-divider-strong) !important;
margin: 0 0 8px 0 !important;
}
.reset-acc-topbar__back {
display: inline-flex !important;
align-items: center;
flex: 1;
min-width: 0;
color: var(--reset-acc-terracotta) !important;
text-decoration: none !important;
background: transparent;
border: none;
border-radius: 0;
cursor: pointer;
padding: 0;
gap: 0;
transition: opacity 0.15s ease;
}
.reset-acc-topbar__back:active {
opacity: 0.6;
}
.reset-acc-topbar__chevron {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex-shrink: 0;
}
.reset-acc-topbar__chevron::before {
content: "";
display: block;
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.reset-acc-topbar__title {
flex: 1;
margin: 0 !important;
padding: 0 4px 0 0 !important;
text-align: center !important;
font-size: 17px !important;
line-height: 1.2 !important;
font-weight: 600 !important;
color: var(--reset-acc-dark-earth) !important;
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Symmetrie — rechter Spacer in Groesse des Back-Buttons */
.reset-acc-topbar__spacer {
display: inline-flex !important;
width: 40px;
height: 40px;
flex-shrink: 0;
}
/* Content-Padding im Endpoint-View */
body.reset-acc-view-content .woocommerce-MyAccount-content {
padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
overscroll-behavior-y: contain;
}
/* Die Topbar darf sich ueber das Content-Padding hinauslegen (full-bleed) */
body.reset-acc-view-content .woocommerce-MyAccount-content > .reset-acc-topbar {
margin-left: -16px;
margin-right: -16px;
padding-left: 8px;
padding-right: 8px;
}
/* Form-Inputs auf iOS: 16px verhindert Zoom-on-focus */
body.reset-acc-view-content .woocommerce-MyAccount-content input[type="text"],
body.reset-acc-view-content .woocommerce-MyAccount-content input[type="email"],
body.reset-acc-view-content .woocommerce-MyAccount-content input[type="password"],
body.reset-acc-view-content .woocommerce-MyAccount-content input[type="tel"],
body.reset-acc-view-content .woocommerce-MyAccount-content input[type="number"],
body.reset-acc-view-content .woocommerce-MyAccount-content input[type="url"],
body.reset-acc-view-content .woocommerce-MyAccount-content select,
body.reset-acc-view-content .woocommerce-MyAccount-content textarea {
font-size: 16px !important;
}
/* =========================================================
WC-Buttons im Endpoint-View etwas ruhiger, runder.
(Ohne Layout zu brechen — nur optisch angleichen.)
========================================================= */
body.reset-acc-view-content .woocommerce-MyAccount-content .button,
body.reset-acc-view-content .woocommerce-MyAccount-content button[type="submit"] {
min-height: 48px;
padding: 12px 20px;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.01em;
}
/* =========================================================
BOOKINGS — Tabelle → Cards
========================================================= */
body.reset-acc-mobile table.my_account_bookings {
display: block;
background: transparent;
border: none;
width: 100%;
}
body.reset-acc-mobile table.my_account_bookings thead {
display: none;
}
body.reset-acc-mobile table.my_account_bookings tbody {
display: flex;
flex-direction: column;
gap: 10px;
}
body.reset-acc-mobile table.my_account_bookings tr {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto auto;
background: #fff;
border-radius: 14px;
padding: 14px 16px;
box-shadow: 0 1px 4px rgba(0,0,0,.07);
border: none !important;
gap: 2px 8px;
}
body.reset-acc-mobile table.my_account_bookings td {
display: block;
border: none !important;
padding: 0 !important;
background: transparent !important;
}
body.reset-acc-mobile table.my_account_bookings td.booking-id {
display: none;
}
body.reset-acc-mobile table.my_account_bookings td.booked-product {
grid-column: 1;
grid-row: 1;
font-weight: 700;
font-size: 15px;
color: #1c3f5e;
margin-bottom: 2px;
}
body.reset-acc-mobile table.my_account_bookings td.booking-status {
grid-column: 2;
grid-row: 1;
align-self: start;
display: inline-block !important;
font-size: 11px;
font-weight: 600;
padding: 3px 9px !important;
border-radius: 20px;
background: #eef4ee;
color: #2d7a50;
white-space: nowrap;
}
body.reset-acc-mobile table.my_account_bookings td.booking-start-date {
grid-column: 1 / 3;
grid-row: 2;
font-size: 14px;
color: #444;
}
/* End-Datum: in account-mobile.css per !important global ausgeblendet.
Die alten Grid-Row-Regeln dafuer wurden entfernt; nachfolgende
Rows ruecken eins nach oben (order-number 4->3, join-link 5->4, cancel 6->5). */
body.reset-acc-mobile table.my_account_bookings td.order-number {
grid-column: 1;
grid-row: 3;
font-size: 12px;
color: #999;
}
body.reset-acc-mobile table.my_account_bookings td.order-number:not(:empty)::before {
content: 'Bestellung #';
}
body.reset-acc-mobile table.my_account_bookings td.booking-join-link {
grid-column: 1 / 3;
grid-row: 4;
margin-top: 6px;
}
body.reset-acc-mobile table.my_account_bookings td.booking-join-link a {
display: inline-flex;
align-items: center;
background: #1c3f5e;
color: #fff !important;
padding: 9px 18px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
text-decoration: none !important;
}
/* Storno: bewusst abgesetzt vom Starten-Button (Abstand, Link rechtsbuendig),
damit er nicht wie dessen Anhaengsel wirkt. Farbe/Groesse kommt dezent
aus storno-customer.css (.ram-storno-link, grau). Frist-Hinweistexte
(.ram-storno-blocked) bleiben linksbuendig lesbar. */
body.reset-acc-mobile table.my_account_bookings td.booking-cancel {
grid-column: 1 / 3;
grid-row: 5;
margin-top: 10px !important;
}
body.reset-acc-mobile table.my_account_bookings td.booking-cancel .ram-storno-link {
display: block;
margin-left: auto;
width: fit-content;
}
/* =========================================================
EVENTS LAZY-LOAD — Spinner fuer Cache-Miss
========================================================= */
.reset-acc-events-placeholder {
display: flex;
justify-content: center;
align-items: center;
min-height: 180px;
}
.reset-acc-events-spinner {
display: inline-block;
width: 32px;
height: 32px;
border: 3px solid rgba(0, 0, 0, 0.08);
border-top-color: var(--reset-acc-terracotta);
border-radius: 50%;
animation: resetAccSpin 0.75s linear infinite;
}
/* =========================================================
ORDERS TABLE → Mobile Cards
Gleiches Pattern wie .my_account_bookings
========================================================= */
body.reset-acc-mobile table.woocommerce-orders-table {
display: block;
background: transparent;
border: none;
width: 100%;
}
body.reset-acc-mobile table.woocommerce-orders-table thead {
display: none;
}
body.reset-acc-mobile table.woocommerce-orders-table tbody {
display: flex;
flex-direction: column;
gap: 10px;
}
body.reset-acc-mobile table.woocommerce-orders-table tr {
display: grid;
grid-template-columns: 1fr auto;
background: #fff;
border-radius: 14px;
padding: 14px 16px;
box-shadow: 0 1px 4px rgba(0,0,0,.07);
border: none !important;
gap: 2px 8px;
}
body.reset-acc-mobile table.woocommerce-orders-table td,
body.reset-acc-mobile table.woocommerce-orders-table th {
display: block;
border: none !important;
padding: 0 !important;
background: transparent !important;
}
/* Bestellungsnummer — Titelzeile links */
body.reset-acc-mobile table.woocommerce-orders-table .woocommerce-orders-table__cell-order-number {
grid-column: 1;
grid-row: 1;
font-weight: 700;
font-size: 15px;
margin-bottom: 2px;
}
body.reset-acc-mobile table.woocommerce-orders-table .woocommerce-orders-table__cell-order-number a {
color: #1c3f5e !important;
text-decoration: none !important;
}
/* Status-Badge — rechts in Zeile 1 */
body.reset-acc-mobile table.woocommerce-orders-table .woocommerce-orders-table__cell-order-status {
grid-column: 2;
grid-row: 1;
align-self: start;
display: inline-block !important;
font-size: 11px;
font-weight: 600;
padding: 3px 9px !important;
border-radius: 20px;
background: #eef4ee;
color: #2d7a50;
white-space: nowrap;
}
/* Datum — volle Breite Zeile 2 */
body.reset-acc-mobile table.woocommerce-orders-table .woocommerce-orders-table__cell-order-date {
grid-column: 1 / 3;
grid-row: 2;
font-size: 14px;
color: #444;
}
/* Gesamtsumme — volle Breite Zeile 3 */
body.reset-acc-mobile table.woocommerce-orders-table .woocommerce-orders-table__cell-order-total {
grid-column: 1 / 3;
grid-row: 3;
font-size: 14px;
color: #555;
}
/* Aktionen — Button volle Breite Zeile 4 */
body.reset-acc-mobile table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
grid-column: 1 / 3;
grid-row: 4;
margin-top: 6px;
}
body.reset-acc-mobile table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions a {
display: inline-flex;
align-items: center;
background: #1c3f5e;
color: #fff !important;
padding: 9px 18px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
text-decoration: none !important;
}
}