/**
* R.E.SET Account Mobile — Base Styles
* ---------------------------------------------------------------
* Alles, was UNABHAENGIG vom Mobile-Breakpoint gilt:
* - CSS-Variablen (Brand-Palette)
* - Keyframes
* - prefers-reduced-motion-Reset
* - Desktop: Back-Header ausblenden (Layout sonst unberuehrt)
*
* Die mobilen Regeln liegen in account-mobile-inner.css und werden
* per PHP mit dem konfigurierbaren @media-Breakpoint gewrappt.
*/
:root {
--reset-acc-terracotta: #B74A32;
--reset-acc-terracotta-soft: rgba(183, 74, 50, 0.08);
--reset-acc-dark-earth: #2B1810;
--reset-acc-warm-taupe: #6B5D47;
--reset-acc-warm-sand: #E8DCC4;
--reset-acc-warm-cream: #F5F1EA;
--reset-acc-divider: rgba(0, 0, 0, 0.06);
--reset-acc-divider-strong: rgba(0, 0, 0, 0.10);
--reset-acc-chevron: #C7C7CC;
--reset-acc-bg: #ffffff;
--reset-acc-row-h: 56px;
--reset-acc-topbar-h: 52px;
}
/* =========================================================
TOPBAR — Default-Variante (Desktop).
Zeigt den aktuellen Endpoint-Namen als Header in der
Akzentfarbe der jeweiligen Menue-Gruppe. Auf Mobile wird
das in account-mobile-inner.css zu einer sticky Back-Bar
ueberschrieben (Chevron + zentrierter Titel + Blur).
========================================================= */
.reset-acc-topbar {
display: flex;
align-items: center;
min-height: 56px;
margin: 0 0 24px 0;
padding: 0;
border-bottom: 2px solid var(--reset-acc-topbar-accent, var(--reset-acc-dark-earth));
}
/* Gruppen-Akzentfarben — gespiegelt aus den Accordion-Toggle-Farben
in account-mobile.css (Mobile-Menue): calendar / bookmark / gift / gear. */
.reset-acc-topbar--group-termine { --reset-acc-topbar-accent: #1c3f5e; }
.reset-acc-topbar--group-abos { --reset-acc-topbar-accent: #2464a8; }
.reset-acc-topbar--group-vorteile { --reset-acc-topbar-accent: #c2721a; }
.reset-acc-topbar--group-einstellungen { --reset-acc-topbar-accent: #2d7a50; }
.reset-acc-topbar--group-orders { --reset-acc-topbar-accent: var(--reset-acc-dark-earth); }
.reset-acc-topbar--group-default { --reset-acc-topbar-accent: var(--reset-acc-terracotta); }
.reset-acc-topbar__back {
display: inline-flex;
align-items: center;
flex: 1;
min-width: 0;
color: var(--reset-acc-topbar-accent);
text-decoration: none !important;
}
.reset-acc-topbar__title {
margin: 0 !important;
padding: 0 0 8px 0 !important;
font-size: 22px;
line-height: 1.2;
font-weight: 700;
color: var(--reset-acc-topbar-accent);
letter-spacing: -0.01em;
}
/* Desktop: Chevron + Spacer ausblenden — das linke Menue zeigt schon,
wo der Kunde steht. Auf Mobile werden beide in inner.css wieder eingeblendet. */
.reset-acc-topbar__chevron,
.reset-acc-topbar__spacer {
display: none;
}
/* =========================================================
BOOKINGS-TABELLE — gilt fuer Desktop UND Mobile.
End-Datum-Spalte komplett verstecken (Header + alle Zellen).
Header bekommt vom JS die Klasse .reset-acc-th--end-date-hidden;
Body-Zellen via .booking-end-date.
========================================================= */
body.reset-acc-ep--bookings table.my_account_bookings th.reset-acc-th--end-date-hidden,
body.reset-acc-ep--bookings table.my_account_bookings td.booking-end-date {
display: none !important;
}
/* Storno-Spalte: leere Zelle bekommt einen unaufdringlichen Em-Dash,
damit die Spaltenbreite nicht kollabiert solange Task 3 (Storno-Link)
noch nicht greift. */
body.reset-acc-ep--bookings table.my_account_bookings td.booking-cancel:empty::before {
content: "—";
color: var(--reset-acc-chevron);
}
/* "Sitzung starten" als klarer, blau gerahmter Button (Desktop) — die
PRIMAERE Aktion der Zeile. Gegenstueck: der Storno-Link ist bewusst
grau/dezent. Mobile behaelt den gefuellten Button aus inner.css. */
body.reset-acc-ep--bookings table.my_account_bookings td.booking-join-link a {
display: inline-block;
padding: 9px 20px;
border: 2px solid #1c3f5e;
border-radius: 8px;
color: #1c3f5e !important;
font-size: 14px;
font-weight: 600;
text-decoration: none !important;
white-space: nowrap;
transition: background 0.15s ease, color 0.15s ease;
}
body.reset-acc-ep--bookings table.my_account_bookings td.booking-join-link a:hover,
body.reset-acc-ep--bookings table.my_account_bookings td.booking-join-link a:focus {
background: #1c3f5e;
color: #fff !important;
}
/* =========================================================
EVENTS LAZY-LOAD — Fehler-UI (Desktop + Mobile).
Erscheint nach 3 fehlgeschlagenen Lade-Versuchen statt
eines ewig drehenden Spinners.
========================================================= */
.reset-acc-events-error {
text-align: center;
padding: 28px 16px;
}
.reset-acc-events-error p {
margin: 0 0 14px;
color: var(--reset-acc-warm-taupe);
font-size: 14px;
}
.reset-acc-events-retry {
display: inline-block;
padding: 10px 22px;
background: transparent;
color: var(--reset-acc-terracotta);
border: 1.5px solid var(--reset-acc-terracotta);
border-radius: 8px;
font-size: 14px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.reset-acc-events-retry:hover,
.reset-acc-events-retry:focus {
background: var(--reset-acc-terracotta);
color: #fff;
}
/* Seitentitel ("Mein Konto") auf allen Account-Seiten ausblenden —
gilt fuer Desktop UND Mobile. Deckt gaengige Theme-Container ab
(Blocksy, Astra, GeneratePress, WC-Defaults). */
body.reset-acc-mobile .entry-header,
body.reset-acc-mobile .entry-title,
body.reset-acc-mobile h1.entry-title,
body.reset-acc-mobile .page-title,
body.reset-acc-mobile .page-hero-section,
body.reset-acc-mobile .hero-section,
body.reset-acc-mobile .ct-hero-section,
body.reset-acc-mobile .woocommerce-products-header,
body.reset-acc-mobile header.entry-header,
body.reset-acc-mobile .wp-block-post-title {
display: none !important;
}
/* Slide-In beim View-Wechsel */
@keyframes resetAccSlideIn {
from {
opacity: 0;
transform: translate3d(12px, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes resetAccSpin {
to { transform: rotate(360deg); }
}
@keyframes resetAccSlideInBack {
from {
opacity: 0;
transform: translate3d(-12px, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
/* ===================================================================
DESKTOP (> 1024px) — Nav-Styling angelehnt an die Mobile-Version
Komplett im @media-Block: kann NIEMALS die Mobile-CSS beeinflussen.
=================================================================== */
@media (min-width: 1025px) {
/* Blocksy "Konto / Abmelden"-Links verstecken */
.reset-acc-mobile .ct-account-user-box > span,
.reset-acc-mobile .ct-account-user-box > a {
display: none !important;
}
/* Separator-Items verstecken */
.woocommerce-MyAccount-navigation ul li.reset-acc-separator,
[class*="MyAccount-navigation"] ul li.reset-acc-separator {
display: none !important;
}
/* Account-Welcome-Box */
.reset-acc-mobile .ct-account-welcome {
padding: 12px 16px 10px;
}
.reset-acc-view-menu .ct-account-welcome {
border-bottom: 1px solid var(--reset-acc-divider);
}
/* Username: Person-Icon + Fettschrift */
.reset-acc-mobile .ct-account-user-box {
font-size: 15px;
font-weight: 700;
color: var(--reset-acc-dark-earth);
line-height: 1.3;
}
.reset-acc-mobile .ct-account-user-box::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
vertical-align: middle;
margin-right: 7px;
margin-bottom: 2px;
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;
}
/* Nav-Liste zuruecksetzen */
body.reset-acc-mobile .woocommerce-MyAccount-navigation ul,
body.reset-acc-mobile .woocommerce-MyAccount-navigation ol {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
body.reset-acc-mobile .woocommerce-MyAccount-navigation ul li,
body.reset-acc-mobile .woocommerce-MyAccount-navigation ol li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
position: relative;
}
/* Doppelter Abstand ueber dem ersten Menuepunkt (Rechnungen) */
body.reset-acc-mobile .woocommerce-MyAccount-navigation > ul > li:first-child {
margin-top: 28px !important;
}
/* Nav-Item: Icon absolut positioniert (Text-Offset unabhaengig vom inneren Markup,
WC-Anker haben Leading-Whitespace, der sonst den Abstand gegenueber Accordion-Toggles verschiebt) */
body.reset-acc-mobile .woocommerce-MyAccount-navigation ul li a {
display: flex !important;
align-items: center;
gap: 0;
width: 100%;
min-height: 40px;
padding: 7px 16px 7px 48px !important;
position: relative;
font-size: 14px;
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.12s ease;
}
body.reset-acc-mobile .woocommerce-MyAccount-navigation ul li a:hover {
background-color: var(--reset-acc-terracotta-soft) !important;
}
/* Aktiver Eintrag */
body.reset-acc-mobile .woocommerce-MyAccount-navigation ul li.is-active > a {
font-weight: 600;
color: var(--reset-acc-terracotta) !important;
}
body.reset-acc-mobile .woocommerce-MyAccount-navigation ul li.is-active > a::before {
background-color: var(--reset-acc-terracotta) !important;
}
/* Icon ::before — absolut positioniert links (konstanter Text-Offset) */
body.reset-acc-mobile .woocommerce-MyAccount-navigation ul li a::before {
content: "";
display: block;
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
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 ::after */
body.reset-acc-mobile .woocommerce-MyAccount-navigation ul li a::after {
content: "";
display: block;
width: 14px;
height: 14px;
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 Desktop (gleiche SVGs wie Mobile)
========================================================= */
body.reset-acc-mobile .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-mobile .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-mobile .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-mobile .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-mobile .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-mobile .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-mobile .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-mobile .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-mobile .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-mobile .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-mobile .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-mobile .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-mobile .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-mobile .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-mobile .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-mobile .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-mobile .reset-acc-icon--trash > a::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
body.reset-acc-mobile .reset-acc-icon--default > a::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Logout + Trash: rot */
body.reset-acc-mobile .reset-acc-icon--logout > a,
body.reset-acc-mobile .reset-acc-icon--trash > a {
color: var(--reset-acc-terracotta) !important;
}
body.reset-acc-mobile .reset-acc-icon--logout > a::before,
body.reset-acc-mobile .reset-acc-icon--trash > a::before {
background-color: var(--reset-acc-terracotta) !important;
}
/* Logout-Button am Ende des Menues (kompakter als Mobile) */
body.reset-acc-mobile .woocommerce-MyAccount-navigation .reset-acc-logout-btn,
body.reset-acc-mobile [class*="MyAccount-navigation"] .reset-acc-logout-btn {
display: flex;
align-items: center;
justify-content: center;
/* 1.5 leere Zeilen Abstand zum letzten Menuepunkt darueber */
margin: 60px 16px 12px;
padding: 7px 16px;
min-height: 36px;
font-size: 13px;
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: 20px;
text-decoration: none !important;
transition: background-color 0.12s ease;
}
body.reset-acc-mobile .woocommerce-MyAccount-navigation .reset-acc-logout-btn:hover {
background: rgba(183, 74, 50, 0.14) !important;
}
/* =========================================================
ACCORDION-GRUPPEN (Desktop: in-place, kein Drill-Down)
========================================================= */
/* Accordion-: kein Divider-Strich (kommt vom Kind) */
body.reset-acc-mobile .woocommerce-MyAccount-navigation ul li.reset-acc-accordion::before {
display: none !important;
}
/* Toggle-Button: identischer Layout-Stack wie -Zeilen (Icon absolut) */
body.reset-acc-mobile .reset-acc-accordion .reset-acc-accordion__toggle {
display: flex !important;
align-items: center;
gap: 0;
width: 100%;
min-height: 40px;
padding: 7px 16px 7px 48px;
position: relative;
font-size: 14px;
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.12s ease;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
}
body.reset-acc-mobile .reset-acc-accordion .reset-acc-accordion__toggle:hover {
background-color: var(--reset-acc-terracotta-soft);
}
/* Icon ::before — absolut positioniert links */
body.reset-acc-mobile .reset-acc-accordion .reset-acc-accordion__toggle::before {
content: "";
display: block;
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
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 (rotiert wenn offen) */
body.reset-acc-mobile .reset-acc-accordion .reset-acc-accordion__toggle::after {
content: "";
display: block;
width: 14px;
height: 14px;
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;
}
body.reset-acc-mobile .reset-acc-accordion .reset-acc-accordion__toggle[aria-expanded="true"]::after {
transform: rotate(180deg);
}
/* Calendar-Icon */
body.reset-acc-mobile .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 */
body.reset-acc-mobile .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: fetter */
body.reset-acc-mobile .reset-acc-accordion--active > .reset-acc-accordion__toggle {
font-weight: 600;
}
/* Sub-Liste (in-place, kein Drill-Down) */
body.reset-acc-mobile .reset-acc-accordion__sub {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
background: rgba(0, 0, 0, 0.015);
}
body.reset-acc-mobile .reset-acc-accordion__sub--closed {
display: none !important;
}
/* Sub-Items: eingerueckt, kleinere Schrift, kein Icon, kein Chevron */
body.reset-acc-mobile .reset-acc-accordion__sub li a {
padding-left: 48px !important;
font-size: 13px !important;
font-weight: 400 !important;
min-height: 36px !important;
color: var(--reset-acc-warm-taupe) !important;
}
body.reset-acc-mobile .reset-acc-accordion__sub li a::before,
body.reset-acc-mobile .reset-acc-accordion__sub li a::after {
display: none !important;
}
body.reset-acc-mobile .reset-acc-accordion__sub li.is-active > a {
font-weight: 600 !important;
color: var(--reset-acc-terracotta) !important;
}
/* =========================================================
GRUPPEN-FARBEN Desktop
========================================================= */
/* Meine Termine — Dunkelblau */
body.reset-acc-mobile .reset-acc-icon--calendar.reset-acc-accordion > .reset-acc-accordion__toggle { color: #1c3f5e; }
body.reset-acc-mobile .reset-acc-icon--calendar.reset-acc-accordion > .reset-acc-accordion__toggle::before,
body.reset-acc-mobile .reset-acc-icon--calendar.reset-acc-accordion > .reset-acc-accordion__toggle::after { background-color: #1c3f5e; }
/* Meine Abos & Kurse — Blau + Bookmark-Icon */
body.reset-acc-mobile .reset-acc-icon--bookmark.reset-acc-accordion > .reset-acc-accordion__toggle { color: #2464a8; }
body.reset-acc-mobile .reset-acc-icon--bookmark.reset-acc-accordion > .reset-acc-accordion__toggle::before,
body.reset-acc-mobile .reset-acc-icon--bookmark.reset-acc-accordion > .reset-acc-accordion__toggle::after { background-color: #2464a8; }
body.reset-acc-mobile .reset-acc-icon--bookmark.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,");
}
/* Meine Vorteile — Orange + Gift-Icon */
body.reset-acc-mobile .reset-acc-icon--gift.reset-acc-accordion > .reset-acc-accordion__toggle { color: #c2721a; }
body.reset-acc-mobile .reset-acc-icon--gift.reset-acc-accordion > .reset-acc-accordion__toggle::before,
body.reset-acc-mobile .reset-acc-icon--gift.reset-acc-accordion > .reset-acc-accordion__toggle::after { background-color: #c2721a; }
body.reset-acc-mobile .reset-acc-icon--gift.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,");
}
/* Einstellungen — Gruen */
body.reset-acc-mobile .reset-acc-icon--gear.reset-acc-accordion > .reset-acc-accordion__toggle { color: #2d7a50; }
body.reset-acc-mobile .reset-acc-icon--gear.reset-acc-accordion > .reset-acc-accordion__toggle::before,
body.reset-acc-mobile .reset-acc-icon--gear.reset-acc-accordion > .reset-acc-accordion__toggle::after { background-color: #2d7a50; }
/* Konto loeschen (destructive): knallrote Schrift, normaler Hintergrund */
body.reset-acc-mobile .reset-acc-accordion__sub li.reset-acc-icon--trash > a {
color: #e30000 !important;
font-weight: 600 !important;
}
} /* Ende @media (min-width: 1025px) */
/* Reduced Motion respektieren */
@media (prefers-reduced-motion: reduce) {
body.reset-acc-mobile .woocommerce-MyAccount-content,
body.reset-acc-mobile .woocommerce-MyAccount-navigation,
body.reset-acc-mobile .reset-acc-topbar {
animation: none !important;
transition: none !important;
}
}