/* ═══════════════════════════════════════════════════════════════════════════════
 * em-base.css — Plattform Design-Defaults (ExpertMaker Pages)
 * Plattform-Defaults — werden durch project.css des jeweiligen Projekts überschrieben.
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Schriften von fonts.expmk.de ─────────────────────────────────────────── */
@import "https://fonts.expmk.de/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,700&display=swap";
@import "https://fonts.expmk.de/css2?family=Roboto+Slab:wght@300;400;700&display=swap";

/* ── Design-Tokens (globaler Default — wird durch BE <style>-Block pro Tenant überschrieben) ── */
:root {
  --font-size: 1rem;

  /* Spacing */
  --paddingT: 1rem;
  --paddingB: 1rem;
  --paddingL: 1rem;
  --paddingR: 1rem;
  --paddingX: 1rem;  /* legacy alias for L+R */
  --paddingY: 1rem;  /* legacy alias for T+B */
  --marginT:  1rem;
  --marginB:  1rem;
  --marginL:  1rem;
  --marginR:  1rem;

  /* ── Brand-Farben (Fallback; kommen vom BE RenderCSSVars) ── */
  --primary-base:    #2563EB;
  --primary-dark:    color-mix(in hsl, #2563EB 72%, black 28%);
  --primary-light:   color-mix(in hsl, #2563EB 25%, white 75%);

  --secondary-base:  #1E293B;
  --secondary-dark:  color-mix(in hsl, #1E293B 72%, black 28%);
  --secondary-light: color-mix(in hsl, #1E293B 25%, white 75%);

  --contrast-base:   #F59E0B;
  --contrast-dark:   color-mix(in hsl, #F59E0B 72%, black 28%);
  --contrast-light:  color-mix(in hsl, #F59E0B 25%, white 75%);

  /* ── Shade: neutrales Grau-System (unabhängig von Brand-Farben) ── */
  --shade:            0, 0%, 50%;
  --shade-base:       hsl(var(--shade));
  --shade-dark:       color-mix(in hsl, hsl(var(--shade)) 70%, black 30%);
  --shade-dark-base:  color-mix(in hsl, hsl(var(--shade)) 70%, black 30%);
  --shade-light:      color-mix(in hsl, hsl(var(--shade)) 70%, white 30%);
  --shade-light-base: color-mix(in hsl, hsl(var(--shade)) 70%, white 30%);
  --shade-lightgray:  #e4e9f0;

  /* ── Textfarben ── */
  --text-dark:  #111827;
  --text-light: #ffffff;

  /* ── Schriften (Fallback; kommen vom BE RenderCSSVars) ── */
  --headline-font: 'Roboto Slab', serif;
  --copytext-font: 'Roboto', sans-serif;

  /* ── Eyebrow — steht VOR der Überschrift (Kicker/Label) ── */
  /* Gesetzt via ProjectSettings → Typography → Eyebrow ✦             */
  /* Ein einheitlicher Stil für alle Ebenen, override im Custom CSS.   */
  --eyebrow-font-color:        var(--primary-base);
  --eyebrow-font-family:       var(--copytext-font);
  --eyebrow-font-size:         0.75rem;
  --eyebrow-font-weight:       700;
  --eyebrow-font-lineheight:   1.2;
  --eyebrow-text-transform:    uppercase;
  --eyebrow-letter-spacing:    0.12em;

  /* ── Sub/Subtitle-Basis-Stil — steht NACH der Überschrift ── */
  /* Gesetzt via ProjectSettings → Typography → Sub/Kicker ✦           */
  /* Pro-Override per Ebene im Custom CSS: --h2sub-font-color: ...      */
  --sub-font-color:        var(--shade-mid);
  --sub-font-family:       var(--copytext-font);
  --sub-font-size:         1.0625rem;
  --sub-font-weight:       400;
  --sub-font-lineheight:   1.4;
  --sub-text-transform:    none;
  --sub-letter-spacing:    0;

  /* H1sub — Hero Subtitle */
  --h1sub-font-color:       var(--sub-font-color);
  --h1sub-font-family:      var(--sub-font-family);
  --h1sub-font-size:        var(--sub-font-size);
  --h1sub-font-weight:      var(--sub-font-weight);
  --h1sub-font-lineheight:  var(--sub-font-lineheight);
  --h1sub-text-transform:   var(--sub-text-transform);
  --h1sub-letter-spacing:   var(--sub-letter-spacing);

  /* H2sub — Article Subtitle */
  --h2sub-font-color:       var(--sub-font-color);
  --h2sub-font-family:      var(--sub-font-family);
  --h2sub-font-size:        var(--sub-font-size);
  --h2sub-font-weight:      var(--sub-font-weight);
  --h2sub-font-lineheight:  var(--sub-font-lineheight);
  --h2sub-text-transform:   var(--sub-text-transform);
  --h2sub-letter-spacing:   var(--sub-letter-spacing);

  /* H3sub — Paragraph Subtitle */
  --h3sub-font-color:       var(--sub-font-color);
  --h3sub-font-family:      var(--sub-font-family);
  --h3sub-font-size:        0.9375rem;
  --h3sub-font-weight:      var(--sub-font-weight);
  --h3sub-font-lineheight:  var(--sub-font-lineheight);
  --h3sub-text-transform:   var(--sub-text-transform);
  --h3sub-letter-spacing:   var(--sub-letter-spacing);

  /* H4sub — Marginal Subtitle */
  --h4sub-font-color:       var(--sub-font-color);
  --h4sub-font-family:      var(--sub-font-family);
  --h4sub-font-size:        0.875rem;
  --h4sub-font-weight:      var(--sub-font-weight);
  --h4sub-font-lineheight:  var(--sub-font-lineheight);
  --h4sub-text-transform:   var(--sub-text-transform);
  --h4sub-letter-spacing:   var(--sub-letter-spacing);

  /* Legacy alias */
  --emphasis-font-color:    var(--eyebrow-font-color);
  --emphasis-font-family:   var(--eyebrow-font-family);
  --emphasis-font-size:     var(--eyebrow-font-size);
  --emphasis-font-weight:   var(--eyebrow-font-weight);

  --h1-font-color:        var(--shade-dark);
  --h1-font-family:       var(--headline-font);
  --h1-font-size:         2.5rem;
  --h1-font-weight:       700;
  --h1-font-lineheight:   1.15;
  --h1-font-textransform: none;

  --h2-font-color:        var(--shade-dark);
  --h2-font-family:       var(--headline-font);
  --h2-font-size:         1.875rem;
  --h2-font-weight:       700;
  --h2-font-lineheight:   1.2;
  --h2-font-textransform: none;

  --h3-font-color:        var(--shade-dark);
  --h3-font-family:       var(--headline-font);
  --h3-font-size:         1.375rem;
  --h3-font-weight:       600;
  --h3-font-lineheight:   1.3;
  --h3-font-textransform: none;

  --h4-font-color:        var(--shade-dark);
  --h4-font-family:       var(--copytext-font);
  --h4-font-size:         1.125rem;
  --h4-font-weight:       500;
  --h4-font-lineheight:   1.4;
  --h4-font-textransform: none;

  --h5-font-color:        var(--shade-dark);
  --h5-font-family:       var(--copytext-font);
  --h5-font-size:         1rem;
  --h5-font-weight:       600;
  --h5-font-lineheight:   1.4;
  --h5-font-textransform: none;

  --h6-font-color:        var(--shade-dark);
  --h6-font-family:       var(--copytext-font);
  --h6-font-size:         0.9375rem;
  --h6-font-weight:       600;
  --h6-font-lineheight:   1.4;
  --h6-font-textransform: none;

  --bodytext-font-color:      var(--shade-dark);
  --bodytext-font-family:     var(--copytext-font);
  --bodytext-font-size:       1rem;
  --bodytext-font-weight:     400;
  --bodytext-font-lineheight: 1.65;
}

/* ── Body / Base ──────────────────────────────────────────────────────────── */
/* Both body.mypage (live site) and div.mypage (editor canvas) must get base styles */
body.mypage,
div.mypage {
  -webkit-text-size-adjust: none;
  font-family: var(--copytext-font);
  font-size: var(--font-size);
  color: var(--text-dark);
  background-color: var(--shade-light);
  line-height: 1.65;
}

/* ── Typography ───────────────────────────────────────────────────────────── */
.mypage h1, .mypage .h1 {
  font-family:    var(--h1-font-family)   !important;
  font-size:      var(--h1-font-size)     !important;
  font-weight:    var(--h1-font-weight)   !important;
  line-height:    var(--h1-font-lineheight) !important;
  color:          var(--h1-font-color)    !important;
  hyphens:        auto                   !important;
  margin: 0 0 1rem;
}
.mypage h2, .mypage .h2 {
  font-family:    var(--h2-font-family)   !important;
  font-size:      var(--h2-font-size)     !important;
  font-weight:    var(--h2-font-weight)   !important;
  line-height:    var(--h2-font-lineheight) !important;
  color:          var(--h2-font-color)    !important;
  hyphens:        auto                   !important;
  margin: 0 0 0.75rem;
}
.mypage h3, .mypage .h3 {
  font-family:    var(--h3-font-family)   !important;
  font-size:      var(--h3-font-size)     !important;
  font-weight:    var(--h3-font-weight)   !important;
  line-height:    var(--h3-font-lineheight) !important;
  color:          var(--h3-font-color)    !important;
  hyphens:        auto                   !important;
  margin: 0 0 0.5rem;
}
.mypage h4, .mypage .h4 {
  font-family:    var(--h4-font-family)   !important;
  font-size:      var(--h4-font-size)     !important;
  font-weight:    var(--h4-font-weight)   !important;
  line-height:    var(--h4-font-lineheight) !important;
  color:          var(--h4-font-color)    !important;
  margin: 0 0 0.5rem;
}
.mypage h5, .mypage .h5 {
  font-family:    var(--h5-font-family)   !important;
  font-size:      var(--h5-font-size)     !important;
  font-weight:    var(--h5-font-weight)   !important;
  line-height:    var(--h5-font-lineheight) !important;
  margin: 0 0 0.4rem;
}
.mypage h6, .mypage .h6 {
  font-family:    var(--h6-font-family)   !important;
  font-size:      var(--h6-font-size)     !important;
  font-weight:    var(--h6-font-weight)   !important;
  line-height:    var(--h6-font-lineheight) !important;
  margin: 0 0 0.4rem;
}
.mypage p  { line-height: 1.65 !important; margin: 0 0 1rem !important; }
.mypage b, .mypage strong { font-weight: 700 !important; }
.mypage i, .mypage em    { font-style: italic !important; }
.mypage ol, .mypage ul   { margin-left: 1.75rem !important; }
.mypage small            { font-size: 0.8125rem; opacity: 0.75; }

/* ── Eyebrow / Emphasis ───────────────────────────────────────────────────── */
.mypage .emphasis,
.mypage .eyebrow {
  color:           var(--emphasis-font-color);
  font-family:     var(--emphasis-font-family);
  font-size:       var(--emphasis-font-size);
  font-weight:     var(--emphasis-font-weight) !important;
  line-height:     var(--emphasis-font-lineheight);
  text-transform:  var(--emphasis-font-textransform);
  letter-spacing:  var(--emphasis-letter-spacing);
  display: block;
  margin-bottom: 0.5rem;
}

/* ── Layout ────────────────────────────────────────────────────────────────── */
.mypage .maxW,
.mypage .section .maxW,
.mypage .footerSection .maxW { max-width: 1280px; margin-left: auto; margin-right: auto; }

/* Cascading text-align:center von .mypage (render-struct) bei jeder Section unterbrechen.
 * Sections die explizit zentrieren müssen verwenden .center */
.mypage section[type="layer"] {
  text-align: left;
}

/* ── Heading-Elemente: immer zentriert ────────────────────────────────────
 * Eyebrow, h1–h3 und ihre Companion-Klassen (h1sub/h2sub/h3sub) sind
 * Designelemente die grundsätzlich zentriert dargestellt werden.
 * Sections die bewusst linksbündig ausrichten (z.B. Artikel, Textblöcke)
 * können mit .left überschreiben: .left .eyebrow { text-align: left }
 * ─────────────────────────────────────────────────────────────────────── */
.mypage .eyebrow,
.mypage .emphasis   { text-align: center !important; }

.mypage h1, .mypage .h1 { text-align: center; }
.mypage h2, .mypage .h2 { text-align: center; }
.mypage h3, .mypage .h3 { text-align: center; }

/* ── Eyebrow — steht VOR der Überschrift ──────────────────────────────────── */
/* Ein geteilter Stil für alle Ebenen. Override: .mypage .eyebrow { ... }      */
.mypage .eyebrow {
  color:          var(--eyebrow-font-color);
  font-family:    var(--eyebrow-font-family);
  font-size:      var(--eyebrow-font-size);
  font-weight:    var(--eyebrow-font-weight) !important;
  line-height:    var(--eyebrow-font-lineheight);
  text-transform: var(--eyebrow-text-transform);
  letter-spacing: var(--eyebrow-letter-spacing);
  display: block;
  margin-bottom: 0.4rem;
}

/* ── Per-Level Subtitle Elemente — stehen NACH der Überschrift ─────────────── */
/* Jede Ebene erbt --sub-* von der zentralen Einstellung.                       */
/* Pro-Override im Custom CSS: .mypage .h2sub { color: var(--h2sub-font-color) } */

.mypage .h1sub {
  color:          var(--h1sub-font-color);
  font-family:    var(--h1sub-font-family);
  font-size:      var(--h1sub-font-size);
  font-weight:    var(--h1sub-font-weight) !important;
  line-height:    var(--h1sub-font-lineheight);
  text-transform: var(--h1sub-text-transform);
  letter-spacing: var(--h1sub-letter-spacing);
  display: block;
  margin-top: 0.5rem;
  text-align: center;
}
.mypage .h2sub {
  color:          var(--h2sub-font-color);
  font-family:    var(--h2sub-font-family);
  font-size:      var(--h2sub-font-size);
  font-weight:    var(--h2sub-font-weight) !important;
  line-height:    var(--h2sub-font-lineheight);
  text-transform: var(--h2sub-text-transform);
  letter-spacing: var(--h2sub-letter-spacing);
  display: block;
  margin-top: 0.4rem;
  text-align: center;
}
.mypage .h3sub {
  color:          var(--h3sub-font-color);
  font-family:    var(--h3sub-font-family);
  font-size:      var(--h3sub-font-size);
  font-weight:    var(--h3sub-font-weight) !important;
  line-height:    var(--h3sub-font-lineheight);
  text-transform: var(--h3sub-text-transform);
  letter-spacing: var(--h3sub-letter-spacing);
  display: block;
  margin-top: 0.3rem;
  text-align: center;
}
.mypage .h4sub {
  color:          var(--h4sub-font-color);
  font-family:    var(--h4sub-font-family);
  font-size:      var(--h4sub-font-size);
  font-weight:    var(--h4sub-font-weight) !important;
  line-height:    var(--h4sub-font-lineheight);
  text-transform: var(--h4sub-text-transform);
  letter-spacing: var(--h4sub-letter-spacing);
  display: block;
  margin-top: 0.2rem;
}

.mypage .clearfix    { clear: both; }
.mypage .float-start { float: left; }
.mypage .float-end   { float: right; }

.mypage .rounded { overflow: hidden; border-radius: 0.75rem; }

/* ── Blockquote ───────────────────────────────────────────────────────────── */
.mypage blockquote {
  border-left: 4px solid var(--primary-base) !important;
  margin: 0 !important;
  padding: 0.75rem 0 0.75rem 1.25rem !important;
}
.mypage blockquote p {
  margin:     0 !important;
  font-size:  1.0625rem !important;
  font-style: italic !important;
  line-height: 1.55 !important;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.mypage a.btn,
.mypage .btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              0.5rem;
  padding:          0.7rem 1.75rem;
  border-radius:    0.375rem;
  font-family:      var(--copytext-font);
  font-size:        0.9375rem;
  font-weight:      500;
  text-decoration:  none;
  cursor:           pointer;
  border:           none;
  transition:       background-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.mypage a.btn:hover,
.mypage .btn:hover {
  transform: translateY(-1px);
}

/* CTA button (sc-cta) */
.mypage .btn.sc-cta {
  background-color: var(--primary-base);
  color:            var(--text-light);
}
.mypage .btn.sc-cta:hover {
  background-color: var(--primary-dark);
  color:            var(--text-light);
}

/* Anchor/link button */
.mypage a.anchor {
  color:           var(--primary-base);
  text-decoration: none;
  font-weight:     500;
}
.mypage a.anchor:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Auto-Alternating Section Backgrounds ─────────────────────────────────
 * Sections ohne explizite Farbwahl (kein sc-* / sccol-*) wechseln automatisch
 * zwischen weiß (ungerade) und hellgrau (gerade).
 *
 * HINWEIS: Die Seiten-Sections sind Grandchildren von .mypage (EditorPage.tsx
 * packt alle sections in einen äußeren section.ua-12.center-Wrapper).
 * → KEIN > Combinator, stattdessen Depth-2: .mypage > section > section
 *
 * WICHTIG: nth-of-type statt nth-child — Editor-Overlays (section-menu-bar,
 * insert-strip) sind <div>-Elemente und werden vom Zähler ignoriert.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Alle inneren Seiten-Sections: weißer Basis-Default (ungerade = weiß)
   Ausnahme: Kinder von Sections mit expliziter Farbklasse (sc-*, sccol-*) —
   diese erben den Hintergrund vom Elternteil und dürfen nicht weiß werden. */
.mypage > section[type="layer"]:not([class*="sc-"]):not([class*="sccol-"]) > section[type="layer"]:not([class*="sc-"]):not([class*="sccol-"]) {
  background-color: #ffffff;
}

/* Gerade innere Sections ohne explizite Farbe → Hellgrau */
.mypage > section[type="layer"]:not([class*="sc-"]):not([class*="sccol-"]) > section[type="layer"]:nth-of-type(even):not([class*="sc-"]):not([class*="sccol-"]) {
  background-color: var(--shade-lightgray, #e4e9f0);
}


/* ── Spacing-Prinzip: pd-B für innere Elemente ─────────────────────────────
 * Innere Elemente verwenden pd-B (nur unten) statt pd-Y (oben+unten).
 * Der Container-Layer (pd-3Y / pd-2Y) trägt den oberen Randabstand.
 * Die Datenmigration hat alle pd-Y → pd-B in den JSON-Daten umgestellt.
 * Eine globale :first-child { padding-top: 0 } Regel ist daher NICHT nötig
 * und würde den pd-3Y-Top des Content-Wrappers fälschlicherweise nullen.
 * ─────────────────────────────────────────────────────────────────────── */

/* ── Color Schemes (sccol-* / sc-*) ──────────────────────────────────────── */

/* sccol-a / sc-dark */
.mypage .sccol-a, .mypage .sc-dark {
  background-color: var(--shade-dark-base) !important;
  color:            var(--text-light)       !important;
}
.mypage .sccol-a .emphasis, .mypage .sc-dark .emphasis,
.mypage .sccol-a .eyebrow,  .mypage .sc-dark .eyebrow {
  color: var(--primary-light) !important;
}
.mypage .sccol-a h1, .mypage .sccol-a h2, .mypage .sccol-a h3,
.mypage .sc-dark  h1, .mypage .sc-dark  h2, .mypage .sc-dark  h3 {
  color: var(--text-light) !important;
}
.mypage .sccol-a p, .mypage .sc-dark p { color: rgba(255,255,255,0.8) !important; }

/* sccol-g / sc-light */
.mypage .sccol-g, .mypage .sc-light {
  background-color: var(--shade-light-base) !important;
  color:            var(--text-dark)         !important;
}

/* sccol-b / sc-pri */
.mypage .sccol-b, .mypage .sc-pri {
  background-color: var(--primary-base) !important;
  color:            var(--text-light)   !important;
}

/* sccol-c / sc-pri-l */
.mypage .sccol-c, .mypage .sc-pri-l {
  background-color: var(--primary-light) !important;
  color:            var(--text-dark)     !important;
}

/* sccol-d / sc-sec */
.mypage .sccol-d, .mypage .sc-sec {
  background-color: var(--secondary-base) !important;
  color:            var(--text-light)     !important;
}

/* sccol-e / sc-sec-l */
.mypage .sccol-e, .mypage .sc-sec-l {
  background-color: var(--secondary-light) !important;
  color:            var(--text-dark)       !important;
}

/* sccol-f / sc-acc */
.mypage .sccol-f, .mypage .sc-acc {
  background-color: var(--contrast-base) !important;
  color:            var(--text-light)    !important;
}

/* sccol-h / sc-acc-l */
.mypage .sccol-h, .mypage .sc-acc-l {
  background-color: var(--contrast-light) !important;
  color:            var(--text-dark)      !important;
}

/* ── Grid Aliases ─────────────────────────────────────────────────────────── */
.mypage .full    { width: 100% !important; }
.mypage .half    { width: 50%  !important; }
.mypage .third   { width: 33.333% !important; }
.mypage .quarter { width: 25%  !important; }

/* ── Spacing helpers ─────────────────────────────────────────────────────── */
/* Single-direction */
.pd-T  { padding-top:    calc(1 * var(--paddingT)) !important; }
.pd-2T { padding-top:    calc(2 * var(--paddingT)) !important; }
.pd-3T { padding-top:    calc(3 * var(--paddingT)) !important; }
.pd-B  { padding-bottom: calc(1 * var(--paddingB)) !important; }
.pd-2B { padding-bottom: calc(2 * var(--paddingB)) !important; }
.pd-3B { padding-bottom: calc(3 * var(--paddingB)) !important; }
.pd-L  { padding-left:   calc(1 * var(--paddingL)) !important; }
.pd-2L { padding-left:   calc(2 * var(--paddingL)) !important; }
.pd-3L { padding-left:   calc(3 * var(--paddingL)) !important; }
.pd-R  { padding-right:  calc(1 * var(--paddingR)) !important; }
.pd-2R { padding-right:  calc(2 * var(--paddingR)) !important; }
.pd-3R { padding-right:  calc(3 * var(--paddingR)) !important; }

/* Axis combos (X = left+right, Y = top+bottom) — used by existing page data */
.pd-X  { padding-left: calc(1 * var(--paddingL)) !important; padding-right: calc(1 * var(--paddingR)) !important; }
.pd-2X { padding-left: calc(2 * var(--paddingL)) !important; padding-right: calc(2 * var(--paddingR)) !important; }
.pd-3X { padding-left: calc(3 * var(--paddingL)) !important; padding-right: calc(3 * var(--paddingR)) !important; }
.pd-Y  { padding-top: calc(1 * var(--paddingT)) !important; padding-bottom: calc(1 * var(--paddingB)) !important; }
.pd-2Y { padding-top: calc(2 * var(--paddingT)) !important; padding-bottom: calc(2 * var(--paddingB)) !important; }
.pd-3Y { padding-top: calc(3 * var(--paddingT)) !important; padding-bottom: calc(3 * var(--paddingB)) !important; }

/* ── Molecule Frame (.mol) ────────────────────────────────────────────────────
 * Problem: Grid-Spalten (ua-04, ua-06, …) haben kein eigenes Padding.
 * Moleküle in farbigen Containern sitzen deshalb bündig am Rand.
 *
 * Lösung: .mol gibt einer Spalte / einem Layer einen Innenrahmen.
 *   → Padding nach innen, sodass Inhalt Luft hat.
 *
 * Varianten:
 *   .mol        – Standard-Innenpadding (1× paddingX / paddingY)
 *   .mol-sm     – Kompaktes Padding (0.5× Einheit, z. B. für dichte Karten)
 *   .mol-lg     – Großzügiges Padding (1.5× Einheit, z. B. für Hero-Karten)
 *   .mol-card   – Wie .mol + eigener weißer Hintergrund + Border-Radius
 *                 (→ klassische Card auf farbigem Hintergrund)
 *   .mol-card-dark – Card-Rahmen in Dunkelmodus
 *
 * Verwendung im Editor: layer-Klasse "ua-04 mol" oder "ua-04 mol mol-card"
 * ─────────────────────────────────────────────────────────────────────────── */

.mypage .mol {
  padding: calc(1 * var(--paddingT)) calc(1 * var(--paddingL));
  box-sizing: border-box;
  height: 100%;
}

.mypage .mol-sm {
  padding: calc(0.5 * var(--paddingT)) calc(0.5 * var(--paddingL));
  box-sizing: border-box;
  height: 100%;
}

.mypage .mol-lg {
  padding: calc(1.5 * var(--paddingT)) calc(1.5 * var(--paddingL));
  box-sizing: border-box;
  height: 100%;
}

/* mol-card: mol + eigene Oberfläche (weiße Karte auf farbigem Bg) */
.mypage .mol-card {
  padding:          calc(1.25 * var(--paddingT)) calc(1.25 * var(--paddingL));
  background-color: rgba(255,255,255,0.95);
  border-radius:    var(--border-radius, 0.75rem);
  box-shadow:       0 2px 12px rgba(0,0,0,0.06);
  box-sizing:       border-box;
  height:           100%;
}

/* mol-card-dark: Card auf hellem Hintergrund in dunkler Variante */
.mypage .mol-card-dark {
  padding:          calc(1.25 * var(--paddingT)) calc(1.25 * var(--paddingL));
  background-color: var(--shade-dark-base);
  color:            var(--text-light);
  border-radius:    var(--border-radius, 0.75rem);
  box-shadow:       0 2px 12px rgba(0,0,0,0.18);
  box-sizing:       border-box;
  height:           100%;
}

/* Textfarben in mol-card anpassen falls auf sc-* Hintergrund */
.mypage .sc-pri  .mol-card h1, .mypage .sc-pri  .mol-card h2, .mypage .sc-pri  .mol-card h3,
.mypage .sc-dark .mol-card h1, .mypage .sc-dark .mol-card h2, .mypage .sc-dark .mol-card h3 {
  color: var(--shade-dark) !important;
}
.mypage .sc-pri  .mol-card p,
.mypage .sc-dark .mol-card p { color: var(--shade-dark) !important; }
.mypage .sc-pri  .mol-card .eyebrow,
.mypage .sc-dark .mol-card .eyebrow { color: var(--primary-base) !important; }
.mypage .sc-pri  .mol-card .h1sub, .mypage .sc-pri  .mol-card .h2sub, .mypage .sc-pri  .mol-card .h3sub,
.mypage .sc-dark .mol-card .h1sub, .mypage .sc-dark .mol-card .h2sub, .mypage .sc-dark .mol-card .h3sub {
  color: var(--shade-mid) !important;
}

/* ── Caption ─────────────────────────────────────────────────────────────── */
.mypage .caption {
  font-size:   0.8125rem;
  font-family: var(--copytext-font);
  color:       var(--shade-dark);
  opacity:     0.65;
  line-height: 1.4;
}