/* ═══════════════════════════════════════════════════════════════
ExpertMaker Components — Design Tokens & Base Styles
Extracted from Figma: Whitepace SaaS Landing Page
═══════════════════════════════════════════════════════════════ */
/* ─── Design Tokens ───
*
* Single Source of Truth für Farben ist em-base.css (--primary-base,
* --secondary-base, --contrast-base, --shade-*, --text-light/dark inkl.
* color-mix-Light/Dark-Stufen). Werden zur Runtime per BE-RenderCSSVars
* pro Tenant überschrieben.
*
* Hier nur noch:
* - lokale Aliases auf em-base-Tokens (--text-body, --bg-*, --accent-*)
* damit der bestehende Component-Code weiter kompiliert
* - Layout-/Geometrie-Tokens die kein Farb-Pendant in em-base haben
* (--space-*, --radius-*)
*
* Brand-Color-Defaults dürfen hier NICHT mehr hartcodiert werden — sonst
* gewinnt Cascade-Order über die em-base-Definitionen.
* ─────────────────────────────────────────────────────────────────── */
:root {
/* Aliases auf canonical em-base-Tokens */
--text-body: var(--text-dark);
/* WCAG-AA: kontrast-berechneter gedimmter Ton statt kontrast-blindem
* color-mix(…transparent). Default = on-light; sc-*-Klassen (em-base)
* remappen pro Section-BG auf on-dark/on-primary/etc. */
--text-muted: var(--text-muted-on-light, var(--text-dark));
--bg-white: var(--color-bg);
--bg-light: var(--shade-light-base);
--bg-dark: var(--shade-dark-base);
--accent-base: var(--contrast-base);
--accent-dark: var(--contrast-dark);
/* Spacing */
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 2rem;
--space-lg: 3rem;
--space-xl: 5rem;
/* Radii */
--radius-sm: 0.375rem;
--radius-md: 0.75rem;
--radius-lg: 1rem;
--radius-xl: 1.5rem;
}
/* Eyebrow — uses the canonical --eyebrow-* vars from em-base.css.
* (h1..h6 + h1sub..h4sub are styled in em-base.css via the Type-Scale
* system; no per-tier declaration belongs here.) */
.mypage .eyebrow {
font-family: var(--eyebrow-font-family);
font-size: var(--eyebrow-font-size);
font-weight: var(--eyebrow-font-weight);
line-height: var(--eyebrow-font-lineheight);
text-transform: var(--eyebrow-text-transform);
letter-spacing: var(--eyebrow-letter-spacing);
color: var(--eyebrow-font-color);
}
/* footer-title — eigenständiger Footer-Spalten-Titel.
* Kein eyebrow-Stil (kein Primary-Color, kein uppercase-Zwang).
* Bleibt im RTE linksbündig editierbar. Tenant-Override via --footer-title-*. */
.mypage .footer-title {
font-family: var(--copytext-font);
font-size: 0.75rem;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.08em;
/* WCAG-AA: gedimmter Ton via kontrast-berechnetem Token, nicht opacity
* (opacity 0.55 auf currentColor unterschreitet auf Footer-BG 4.5:1). */
color: var(--text-muted);
margin-bottom: 0.75rem;
text-align: left;
}
/* Heading-Companions — h1sub..h4sub on
elements as visual leads
* paired with h1..h4. Each reads its own --h_N_sub-* var slot from
* em-base.css so a tenant override can recolour/resize a single tier
* without affecting the others. The tier-sizes are ~50–70% of the
* paired heading (own typographic axis, NOT the next-smaller-H).
*/
.mypage .h1sub {
font-family: var(--h1sub-font-family);
font-size: var(--h1sub-font-size);
font-weight: var(--h1sub-font-weight);
line-height: var(--h1sub-font-lineheight);
text-transform: var(--h1sub-text-transform);
letter-spacing: var(--h1sub-letter-spacing);
color: var(--h1sub-font-color);
opacity: var(--sub-font-opacity, 0.75);
hyphens: auto;
}
.mypage .h2sub {
font-family: var(--h2sub-font-family);
font-size: var(--h2sub-font-size);
font-weight: var(--h2sub-font-weight);
line-height: var(--h2sub-font-lineheight);
text-transform: var(--h2sub-text-transform);
letter-spacing: var(--h2sub-letter-spacing);
color: var(--h2sub-font-color);
opacity: var(--sub-font-opacity, 0.75);
hyphens: auto;
}
.mypage .h3sub {
font-family: var(--h3sub-font-family);
font-size: var(--h3sub-font-size);
font-weight: var(--h3sub-font-weight);
line-height: var(--h3sub-font-lineheight);
text-transform: var(--h3sub-text-transform);
letter-spacing: var(--h3sub-letter-spacing);
color: var(--h3sub-font-color);
opacity: var(--sub-font-opacity, 0.75);
hyphens: auto;
}
.mypage .h4sub {
font-family: var(--h4sub-font-family);
font-size: var(--h4sub-font-size);
font-weight: var(--h4sub-font-weight);
line-height: var(--h4sub-font-lineheight);
text-transform: var(--h4sub-text-transform);
letter-spacing: var(--h4sub-letter-spacing);
color: var(--h4sub-font-color);
opacity: var(--sub-font-opacity, 0.75);
hyphens: auto;
}
/* Legacy aliases — keep until call-sites migrate to h_N_sub.
* `.subline` was used in pre-refactor pricing patterns; new patterns
* use the explicit hNsub class for the matching heading tier. */
.mypage .subline {
font-size: var(--h2sub-font-size);
line-height: var(--h2sub-font-lineheight);
font-weight: var(--h2sub-font-weight);
color: var(--h2sub-font-color);
}
.mypage .lead {
font-size: var(--h2sub-font-size);
line-height: var(--h2sub-font-lineheight);
font-weight: var(--h2sub-font-weight);
color: var(--h2sub-font-color);
}
/* ─── Section Color Schemes ─── */
/* ─── Section Color Schemes ───
* The em-base.css uses CSS variables (--h2-font-color etc.) with !important
* to set text colors. We override the variables, not the properties,
* so our overrides win without specificity wars.
* ─── */
/* ─── Section Color Schemes ───
* Each scheme sets the background + overrides CSS variables used by the
* typography rules in em-base.css. Overriding variables (not concrete
* properties) keeps the specificity chain intact — patterns can set
* their own class-scoped variables or direct colors and will win
* against these without needing `!important`.
*
* The root `color:` is set without `!important` so a pattern-level
* rule can change it. The `* { color: inherit }` blanket override was
* removed — it was force-inheriting colors across every child and
* blocked legitimate pattern overrides. */
/* Dark sections (dark bg → light text). Token-based, damit per-tenant
Theming via BE-RenderCSSVars sauber durchgreift. WICHTIG: --eyebrow-
font-color + --emphasis-font-color werden hier NICHT mehr überschrieben
— diese Tokens kommen vom html:root-Block der ProjectSettings → Typography
→ Eyebrow. Wenn der User dort einen Wert setzt, soll er auf allen sc-*-
Sektionen wirken; setzt er nichts, fällt em-base.css auf currentColor
zurück (= Sektion-Textfarbe, immer lesbar). */
.mypage .sc-dark {
background-color: var(--shade-dark-base);
color: var(--text-light);
}
/* Light sections */
.mypage .sc-light {
/* Sanftes vertikales Gradient statt hartem Flat-Color — gleiche
Leserichtung wie das Auge (oben hell → Mitte leicht getönt → unten hell).
--band-bg-* sind in em-base.css definiert und tenant-überschreibbar. */
background: linear-gradient(
180deg,
var(--band-bg-top) 0%,
var(--band-bg-mid) 45%,
var(--band-bg-bot) 100%
);
color: var(--text-dark);
}
/* Primary sections (Brand-Farbe → berechneter on-brand-Text) */
.mypage .sc-pri {
background-color: var(--primary-base);
color: var(--on-primary-text, #fff);
}
/* Primary light sections */
.mypage .sc-pri-l {
background-color: var(--primary-light);
color: var(--text-dark);
}
/* Secondary dark */
.mypage .sc-sec {
background-color: var(--secondary-base);
color: var(--on-secondary-text, #fff);
}
/* Accent sections (Kontrast-Farbe → berechneter on-brand-Text) */
.mypage .sc-acc {
color: var(--on-accent-text, #111827);
}
/* Anchor-Underline auf dunklen Sektionen: der Default --contrast-base
(Orange) hat auf weißem Text noch okayen Kontrast, aber --contrast-light
(heller Akzent) liest sich auf Dunkel-BG klarer. Pri-Sektionen (Brand-BG)
nehmen ebenfalls light, damit der Underline nicht im BG verschwindet. */
/* sc-dark + sc-sec: dunkler Hintergrund → accent-on-dark ≥4.5:1 auf dunklem BG (Task 7) */
.mypage .sc-dark,
.mypage .sc-sec {
--link-underline-color: var(--contrast-light);
--link-hover-color: var(--text-light);
--eyebrow-font-color: var(--accent-on-dark, var(--primary-light));
}
/* sc-pri + sc-acc: BRAND-farbiger Hintergrund → on-primary-text = weiß (max. Kontrast, Task 7)
* primary-light auf primary-Hintergrund wäre fast unsichtbar. */
.mypage .sc-pri,
.mypage .sc-acc {
--link-underline-color: rgba(255,255,255,0.5);
--link-hover-color: var(--text-light);
--eyebrow-font-color: var(--on-primary-text, #fff);
}
/* Auf dunklen Hintergründen (sc-dark/sc-pri/sc-sec/sc-acc) erbt stat-value
* die helle Schriftfarbe des Containers, statt --primary-base zu verwenden
* (das ist i.d.R. die Hintergrundfarbe → Text unsichtbar).
* Spezifizität (.mypage + sc-* + .molecule + .stat-value = 4 Klassen)
* muss > molecule.css (.molecule.stat-item .stat-value = 3 Klassen) sein,
* weil molecule.css nach em-components.css geladen wird. */
.mypage .sc-dark .molecule .stat-value,
.mypage .sc-pri .molecule .stat-value,
.mypage .sc-sec .molecule .stat-value,
.mypage .sc-acc .molecule .stat-value {
color: currentColor;
}
/* ─── Button Base ─── */
.mypage .btn-wrap {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 2rem;
/* --cta-color wird von ProjectSettings gesetzt wenn Button ≠ Primary.
--cta-bg-safe = BE-berechnete dunkle Variante mit ≥4.5:1 Kontrast für weißen Text (Task 7).
Fallback-Kette: ProjectSettings-CTA → BE-safe → primary-base (legacy). */
background: var(--cta-color, var(--cta-bg-safe, var(--primary-base)));
/* `--cta-text` erlaubt eine abweichende Schriftfarbe, wenn der Autor dem
* EINZELNEN Knopf eine helle Farbe gibt (Inspektor → Knopf-Farbe, 2026-08-11).
* Ohne die Eigenschaft bleibt es bei Weiss wie bisher. */
color: var(--cta-text, #fff);
border-radius: var(--radius-md);
font-weight: 600;
font-size: var(--bodytext-font-size);
text-decoration: none;
cursor: pointer;
transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
/* Atemraum: verhindert optisches Zusammenfließen bei mehreren Buttons */
margin: 0.25rem 0.375rem;
border: none;
}
/* Mehrere Buttons in einer Reihe: flex + gap. */
.mypage section[type='layer']:has(> button.btn-wrap),
.mypage section[type='layer']:has(> a.btn-wrap),
.mypage .btn-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.5rem;
}
/* Abstand VOR einer vollbreiten CTA-Zeile — jetzt hier, nicht mehr im Template
* (2026-08-10; der Kommentar ueber der Regel oben sagte vorher das Gegenteil).
*
* Warum die Umkehr: gemessen lagen 21 von 49 CTA-Zeilen bei 20px unter ihrem
* Inhalt, weitere 6 bei 24px — 20px ist ungefaehr der Absatz-Rhythmus, der
* Button las sich dadurch als Teil des Textblocks statt als dessen Abschluss.
* Der Wert ist eine Systemaussage („so weit steht eine Handlung von ihrem
* Inhalt ab"), keine Eigenschaft eines einzelnen Patterns, und gehoert damit
* an eine Stelle. 2rem ist derselbe Wert wie `--section-head-gap`: der
* Uebergang „Ueberschrift -> Inhalt" und „Inhalt -> Handlung" bekommen damit
* denselben Rhythmus.
*
* WARUM NUR `.col-12`: der Selektor `:has(> a.btn-wrap)` trifft jeden Layer
* mit Button-Kind — auch die CTA-SPALTE im Header (`col-3 htc-cta-row`) und
* die Aktionszelle in Karten (`download-card-action`, `team-card-cta`). Dort
* ist ein Abstand nach oben falsch: die Spalte steht neben ihrem Inhalt, nicht
* darunter. Die Bedingung `.col-12` trennt „vollbreite Zeile unter dem Inhalt"
* von „Spalte neben dem Inhalt", ohne eine Liste von Ausnahmen zu pflegen.
*
* Ueber `--cta-gap` zentral stellbar (Projekt-Ebene oder pattern-lokal, wenn
* eine Buehne bewusst mehr Luft braucht). */
.mypage section[type='layer'].col-12:has(> button.btn-wrap),
.mypage section[type='layer'].col-12:has(> a.btn-wrap),
.mypage .btn-row.col-12 {
margin-top: var(--cta-gap, 2rem);
}
.mypage .btn-wrap:hover {
background: var(--cta-dark, var(--primary-dark));
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(4,56,115,0.3);
}
/* NOTE: inner-element selectors (.btn-wrap p|span|div) were removed —
they caused double-padding when the editor injects runtime wrappers.
The button is the wrapper itself. */
/* Dark/primary sections: white button with primary text for max contrast */
/* Auf dunklem Grund ist der Knopf standardmaessig weiss — ABER eine
* ausdrueckliche Knopf-Farbe des Autors muss gewinnen. Diese Regel liegt bei
* (0,3,0) und schlaegt die Basis (0,2,0); ohne die Variablen-Kette waere das
* Farbfeld im Inspektor in jedem dunklen Abschnitt wirkungslos. Ohne
* gesetzte Eigenschaft ist das Verhalten unveraendert. */
.mypage .sc-dark .btn-wrap,
.mypage .sc-pri .btn-wrap,
.mypage .sc-sec .btn-wrap,
.mypage .sc-acc .btn-wrap {
background: var(--cta-color, #fff);
color: var(--cta-text, var(--primary-dark, #1a2f5e));
}
.mypage .sc-dark .btn-wrap:hover,
.mypage .sc-pri .btn-wrap:hover,
.mypage .sc-sec .btn-wrap:hover,
.mypage .sc-acc .btn-wrap:hover {
background: var(--cta-dark, var(--shade-light-base, #f5f5f0));
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
/* btn-dark: dunkle Button-Variante als globaler Helper. Vorher in mehreren
* Patterns referenziert (foot_3col_elegant, foot_horizontal_compact, ...)
* aber nirgends definiert → Button rendete als „schwarzer Blob ohne
* lesbaren Text". Override beats .btn-wrap default (primary) und die
* sc-dark/pri/sec/acc Helligkeits-Variante (white BG)). */
.mypage .btn-dark,
.mypage .btn-wrap.btn-dark,
.mypage .sc-dark .btn-wrap.btn-dark,
.mypage .sc-pri .btn-wrap.btn-dark,
.mypage .sc-sec .btn-wrap.btn-dark,
.mypage .sc-acc .btn-wrap.btn-dark {
background: var(--shade-dark-base) !important;
color: var(--text-light) !important;
}
/* background ohne Flag (Stufe 4c, Rest, 2026-07-30): schlaegt
* `.mypage .btn-wrap:hover` (0,3,0) outright per Spezifitaet (0,4,0 fuer
* "btn-wrap btn-dark", 0,3,0 fuer nur "btn-dark" — beide schlagen den
* Primary-Hover-Default). Gegen `.sc-dark/pri/sec/acc .btn-wrap:hover`
* (ebenfalls (0,4,0) im btn-wrap-Fall) steht diese Regel auf Gleichstand,
* gewinnt aber per Quellreihenfolge — sie ist im selben File WEITER UNTEN
* deklariert als der sc-*-Block. Keine Patterns.css-Datei definiert diesen
* Selektor lokal (geprueft: nur foot_3col_elegant hat eine eigene, staerker
* spezifische Regel mit identischem Wert — kein Konflikt). */
.mypage .btn-dark:hover,
.mypage .btn-wrap.btn-dark:hover {
background: color-mix(in srgb, var(--shade-dark-base) 88%, var(--text-light) 12%);
}
/* btn-outline: die ZWEITE Handlung — gleiche Vorgeschichte wie btn-dark.
* `btn-outline` stand im Template von head_brand_tagline_cta, war aber in
* keiner CSS-Datei beider Repos definiert; am DOM gemessen (2026-08-11)
* rendeten „Anmelden" und „Loslegen" deshalb als zwei IDENTISCHE gefuellte
* Knoepfe (beide rgb(114,91,77), border 0px). Zwei gleich laute Handlungen
* sind keine Hierarchie — der Blick hat keinen Ankerpunkt.
*
* Der Rahmen kommt aus `currentColor` (traegt auf hellem wie dunklem Band ohne
* Nachzug pro Farbpaar) und liegt als INNERER Schatten, nicht als `border`:
* der Basis-Knopf hat `border: none`, ein echter Rahmen machte die Variante
* 2px groesser als ihren Nachbarn. Der Hover muss den Ring erneut setzen, weil
* `.btn-wrap:hover` `box-shadow` ueberschreibt. */
.mypage .btn-wrap.btn-outline {
/* Eine ausdrueckliche Knopf-Farbe FUELLT auch diese Variante (korrigiert
* 2026-08-11 nach Rueckmeldung des Users: „setzt nicht die Farbe des Buttons
* sondern der Schrift").
*
* Mein erster Anlauf faerbte hier bewusst nur Ring und Schrift, damit ein
* Umriss ein Umriss bleibt. Das ist als Systemgedanke verteidigbar, als
* Bedienung aber falsch: das Feld heisst „Knopf-Farbe", und wer darauf klickt,
* erwartet eine gefaerbte FLAECHE. Wer den Umriss behalten will, waehlt keine
* Farbe — der Standard ist unveraendert transparent. */
background: var(--cta-color, transparent);
color: var(--cta-text, inherit);
box-shadow: inset 0 0 0 1px var(--cta-color, currentColor);
}
.mypage .btn-wrap.btn-outline:hover {
/* Ohne die Variable die alte, leichte Tönung; mit gewaehlter Farbe deren
* dunklere Fassung — sonst wuerde der Hover die Fuellung wieder wegnehmen. */
background: var(--cta-dark, color-mix(in srgb, currentColor 10%, transparent));
box-shadow: inset 0 0 0 1px var(--cta-color, currentColor);
}
/* ─── Logo-Fit Helper ──────────────────────────────────────────────────
* Structureller Logo-Sizer: ein Layer mit `class="col-N logo-fit"` (oder
* footer-logo-fit / htc-logo-fit etc.) gibt die Logo-Breite vor.
*
* Caveat em-components-Grid: col-N width-Regeln greifen nur wenn der
* DIREKTE Parent col-12 ist. Bei col-3 inside col-6 brand-block waere
* die col-Quote daher wirkungslos → Image wuerde auf seine natuerliche
* Bildgroesse wachsen (typische Brand-Logos: 1600px+).
*
* Safety-Cap: --logo-max-w (default 240px). Patterns koennen pro Slot
* ueberschreiben:
* .mypage .brand_banner .brand-logo-fit { --logo-max-w: 360px }
* Innerhalb der Cap kann col-N noch shrinken (wenn Grid-Parent col-12).
*/
/* Caps entfallen: col-N steuert die Logo-Breite. Voraussetzung: der
* direkte Parent des logo-fit Layers ist col-12 (logo-row Wrapper im
* Pattern-Template). Dadurch greift die em-components-Grid-Regel
* .col-12 > .col-N { width: calc(N/12 * 100%) }. Author kann im Editor
* den Width-Picker auf logo-fit benutzen und das Logo schrumpfen/wachsen
* sehen.
*
* Optional kann ein Pattern via --logo-max-w noch eine Decke setzen:
* .mypage .brand_banner [class*='logo-fit'] { max-width: 320px; }
* Standard ist keine Decke — col-N + Outer-Brand-Block bestimmen alles. */
.mypage [class*='logo-fit'] img,
.mypage [class*='logo-fit'] picture {
display: block;
width: 100%;
height: auto;
object-fit: contain;
object-position: center; /* kein Beschnitt -> mittig, nicht 30% */
}
/* ─── Unified Header Logo-Container ────────────────────────────────────
* Expliziter Logo-Sizer für Header: Größe via max-height-Skala (entkoppelt
* vom col-Grid), vertikal zentriert. Ersetzt die col-N-logo-fit-Mechanik
* in Header-Patterns. Siehe Spec 2026-07-06-unified-header-contract. */
.mypage .head-logo {
display: flex;
align-items: center; /* vertikal zentriert */
--head-logo-h: 40px; /* Default = logo-m */
}
.mypage .head-logo.logo-xs { --head-logo-h: 24px; }
.mypage .head-logo.logo-s { --head-logo-h: 32px; }
.mypage .head-logo.logo-m { --head-logo-h: 40px; }
.mypage .head-logo.logo-l { --head-logo-h: 56px; }
.mypage .head-logo.logo-xl { --head-logo-h: 72px; }
/* Der Wrapper darf nur so breit sein wie das Logo (2026-08-11).
*
* DIE URSACHE EINES LANGEN FEHLERS: `render-struct.css` gibt jedem
* `section[type='layer']` ein `width: -webkit-fill-available`. Der Logo-Wrapper
* IST so ein Layer, wurde also spaltenbreit — gemessen 1168px in
* head_centered_logo_nav. Ein Block-`` mit `width: auto` und ohne bekannte
* Eigenmasse (der Renderer emittiert kein width/height-Attribut) faellt dann auf
* die Containerbreite zurueck, und `object-fit: contain` macht daraus einen
* briefkastenfoermigen STREIFEN quer durch den Header.
* `fit-content` schlaegt die Basis per Spezifitaet (0,3,1 gegen 0,2,1).
* Dasselbe Problem hatte ich im Footer mit `max-width: 150px` zugeklebt, ohne
* die Ursache zu sehen. */
.mypage section[type='layer'].head-logo {
width: fit-content;
max-width: 100%;
}
.mypage .head-logo img,
.mypage .head-logo picture,
.mypage .head-logo picture img {
display: block;
height: var(--head-logo-h);
width: auto;
max-width: 100%;
object-fit: contain;
/* Linksbuendig statt mittig: das Logo soll optisch an der Inhaltskante
* sitzen, nicht in einem breiteren Kasten schweben. */
object-position: left center;
}
/* Brand-Alignment (Left/Center/Right) — einzige erlaubte Header-Variation.
* Brand-Layer sind flex-COLUMN (Layer-Default). Horizontale Ausrichtung ist
* daher die CROSS-Achse → align-items (NICHT justify-content, das wäre die
* vertikale Haupt-Achse und würde die Elemente fälschlich horizontal
* zentrieren). Vertikale Zentrierung im Header trägt die Row (align-items). */
.mypage .head-align-left,
.mypage .head-align-center,
.mypage .head-align-right,
/* Spezifitaets-Nachzug (2026-08-11, am DOM belegt): render-struct.css gibt
* JEDEM `section[type='layer']` ein `display: inline-block`, und dieser
* Selektor liegt bei (0,2,1) — ein Attributselektor zaehlt wie eine Klasse.
* Die reine Klassenregel darueber liegt bei (0,2,0) und VERLOR. Der
* Brand-Block blieb damit inline-block, `align-items` war wirkungslos und
* head_centered_logo_nav zeigte seine Wortmarke LINKS, obwohl
* `head-align-center` gesetzt war. Sichtbar wurde der Fehler nur bei
* center/right: links ist ohnehin der Default.
*
* `text-align` braucht keinen Nachzug — sobald der Block eine Flex-Spalte
* ist, schrumpft `align-items: center` das Textkind auf seine Inhaltsbreite
* und zentriert es als Box. */
.mypage section[type='layer'].head-align-left,
.mypage section[type='layer'].head-align-center,
.mypage section[type='layer'].head-align-right { display: flex; flex-direction: column; justify-content: center; }
.mypage .head-align-left { align-items: flex-start; text-align: left; }
.mypage .head-align-center { align-items: center; text-align: center; }
.mypage .head-align-right { align-items: flex-end; text-align: right; }
/* Brand-Text: kein p-Default-Margin (descendant, nicht `> p` — das RTE-Markup
* verschachtelt den
tiefer). Sonst wird der Brand-Block höher als der
* Text und der Text hängt oben statt vertikal zentriert zu sein. */
/* Bis Stufe 2 war hier `!important` noetig: em-base setzte
* `.mypage p { margin: 0 0 1.25em !important }`, nur ein `!important` mit
* ≥ Spezifitaet schlug das. Seit dessen Entfernung gewinnt diese Regel
* (0,2,1) bereits per Spezifitaet gegen `.mypage p` (0,1,1) — das Flag ist
* ueberfluessig (Stufe 4a, 2026-07-30).
*
* Wichtig, geprueft und gewollt: dadurch werden `head_brand_tagline_cta`
* und `head_floating_glass` wieder wirksam — deren `> p + p { margin-top:
* 2px }` bzw. `margin-top: 0.4rem` sind mit (0,2,2) bzw. (0,3,2) je nach
* Pattern-Variante spezifischer als diese Regel hier (0,2,1) und gewinnen
* jetzt fuer margin-top. Diese Design-Absicht war nie geloescht, nur tot
* (s. "DERZEIT WIRKUNGSLOS"-Kommentare in den jeweiligen pattern.css) —
* mit dem Flag-Fall wird sie wieder sichtbar, das ist der Zweck dieses
* Batches, keine Regression. margin-bottom bleibt 0: die Pattern-eigene
* `> p { margin: 0 }`-Regel hat dieselbe Spezifitaet (0,2,1) und steht im
* Quelltext nach dieser hier (patterns laden nach components). */
/* `.htc-brand-text` und `.hfg-brand-text` sind hier entfallen (2026-08-11):
* seit der Header-Konsolidierung setzt kein Template diese Klassen mehr, die
* Marke heisst ueberall `head-brand-text`. */
.mypage .head-brand-text p,
.mypage .hcln-brand p { margin: 0; }
/* Header-CTA-Buttons kompakt/dezent — EINE Quelle für beide htc-Varianten
* (ersetzt divergierende Duplikate in den pattern.css, die sich gegenseitig
* überschrieben und die Buttons groß gelassen haben). */
.mypage .head_brand_tagline_cta .htc-cta-row .btn-wrap {
padding: 0.3rem 0.8rem;
margin: 0;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.01em;
border-radius: 0.5rem;
white-space: nowrap;
transition: background 150ms ease, transform 80ms ease;
}
/* ── Header-über-Hero-Overlay ───────────────────────────────────────
* Renderer (annotateHeaderOverlay) setzt .head-overlay-active auf die
* Header-Section, wenn der Hero direkt darunter data-header-overlay
* trägt; .head-sticky zusätzlich bei data-header-sticky; .hero-under-
* overlay auf den Hero.
*
* Plan E1: .head-overlay-active liefert NUR Struktur. Die Default-Optik
* (transparent + heller Text + Verlaufs-Scrim) lebt in .head-overlay-scrim,
* das der Renderer nur ohne explizite Panel-Wahl (sc-* außer sc-light,
* glass-*, bg-image, head-bg-none) mitsetzt. Explizite Schemata (0,2,0)
* wirken damit ungehindert; der Scrim-Block hebt sich mit 0,4,1 über den
* Pattern-Default sc-light (0,2,0). */
.mypage section[type="layer"].head-overlay-active {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 100;
}
/* Default-Optik: nur bei renderer-gesetztem head-overlay-scrim. */
.mypage section[type="layer"].head-overlay-active.head-overlay-scrim {
background: transparent;
color: var(--text-light);
}
/* Kind-Elemente erben die helle Schrift; Brand/Nav-Text explizit hell,
* ohne hardcodierte Farbe (nutzt die sc-light-Variable). */
.mypage section[type="layer"].head-overlay-active.head-overlay-scrim .head-brand-text {
color: var(--text-light);
}
/* Nav-Links routen durch --menu-link-color (Menü-Text-Styling gewinnt auch
* über dem Scrim); Fallback = heller Overlay-Text wie bisher. */
.mypage section[type="layer"].head-overlay-active.head-overlay-scrim .em-nav a,
.mypage section[type="layer"].head-overlay-active.head-overlay-scrim .head-nav-slot a {
color: var(--menu-link-color, var(--text-light));
}
/* Dezenter Scrim: Verlauf oben, verbessert Kontrast über hellen
* Bildbereichen, ohne das Hero-Bild flächig abzudunkeln. */
.mypage section[type="layer"].head-overlay-active.head-overlay-scrim::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 160%;
pointer-events: none;
z-index: -1;
background: linear-gradient(
to bottom,
color-mix(in srgb, var(--shade-dark-base) 38%, transparent),
transparent
);
}
/* Sticky: beim Scrollen oben gepinnt. Der .scrolled-Zustand (solider BG,
* dunkle Schrift, JS aus renderer/sticky.go) MUSS nach dem Scrim-Block
* stehen: gleiche Spezifität (0,4,1) → Source-Order gewinnt. */
.mypage section[type="layer"].head-overlay-active.head-sticky {
position: fixed;
}
.mypage section[type="layer"].head-overlay-active.head-sticky.scrolled {
background: var(--shade-light-base);
color: var(--text-dark);
box-shadow: 0 2px 12px color-mix(in srgb, var(--shade-dark-base) 12%, transparent);
}
.mypage section[type="layer"].head-overlay-active.head-sticky.scrolled::before {
display: none;
}
.mypage section[type="layer"].head-overlay-active.head-sticky.scrolled .head-brand-text {
color: var(--text-dark);
}
.mypage section[type="layer"].head-overlay-active.head-sticky.scrolled .em-nav a,
.mypage section[type="layer"].head-overlay-active.head-sticky.scrolled .head-nav-slot a {
color: var(--menu-link-color, var(--text-dark));
}
/* Hero unter Overlay: Kopf-Freiraum, damit top-alignter Content nicht
* unter dem schwebenden Header verschwindet. Vertikal zentrierte Heroes
* (vh-70 o.ä.) brauchen das kaum, schadet aber nicht. */
.mypage .hero-under-overlay {
--header-clearance: 5rem;
padding-top: var(--header-clearance);
}
/* ─── Arrow-Shape Helper ───────────────────────────────────────────────
* Clip-path-basierte Pfeil-Formen fuer Process-/Step-Patterns. Eine
* Klasse, vier Direction-Modifier, plus Chevron-Variante mit Notch-
* links fuer chain-of-cards Optik.
*
* Custom-Properties zum Tunen pro Pattern:
* --arrow-tip-depth Tiefe der Spitze als %-Wert (Default 12.5% = 1/8)
* --arrow-tip-inset Inset top/bottom vom Tip-Base in % (Default 2.5%)
* --arrow-pad Innen-Padding (Default 1.25rem 1.5rem)
*
* Erwartete DOM-Struktur: ein einzelnes Element mit Klasse .arrow-shape
* (+ optional --chevron / --left / --up / --down). Inhalt fluesst innen.
*
* Cave-At-Pitfalls:
* - clip-path cuts auch ::after-Pseudos und box-shadows weg. Schatten
* statt clip-shape entweder via filter:drop-shadow ODER box-shadow
* auf einen umliegenden Wrapper.
* - Animationen auf clip-path:polygon brauchen gleiche Punktanzahl in
* from/to-States — chevron <-> right wechsel triggert Re-Layout.
*/
.mypage .arrow-shape {
--arrow-tip-depth: 12.5%;
--arrow-tip-inset: 2.5%;
--arrow-pad: 1.25rem 1.5rem;
position: relative;
padding: var(--arrow-pad);
padding-right: calc(var(--arrow-tip-depth) + 1rem);
clip-path: polygon(
0 0,
calc(100% - var(--arrow-tip-depth)) 0,
calc(100% - var(--arrow-tip-depth)) var(--arrow-tip-inset),
100% 50%,
calc(100% - var(--arrow-tip-depth)) calc(100% - var(--arrow-tip-inset)),
calc(100% - var(--arrow-tip-depth)) 100%,
0 100%
);
}
/* Chevron: zusaetzlich Notch-links, sodass eine Chain von Karten optisch
* ineinandergreift (Tipp von Card N landet im Notch von Card N+1). */
.mypage .arrow-shape.arrow-shape--chevron {
padding-left: calc(var(--arrow-tip-depth) + 1rem);
padding-right: calc(var(--arrow-tip-depth) + 1rem);
clip-path: polygon(
0 0,
calc(100% - var(--arrow-tip-depth)) 0,
100% 50%,
calc(100% - var(--arrow-tip-depth)) 100%,
0 100%,
var(--arrow-tip-depth) 50%
);
}
/* No-left-notch fuer die erste Card in einer Chevron-Chain. */
.mypage .arrow-shape.arrow-shape--chevron.arrow-shape--first {
padding-left: 1.5rem;
clip-path: polygon(
0 0,
calc(100% - var(--arrow-tip-depth)) 0,
100% 50%,
calc(100% - var(--arrow-tip-depth)) 100%,
0 100%
);
}
/* No-right-tip fuer die letzte Card in einer Chevron-Chain (Tag-Form). */
.mypage .arrow-shape.arrow-shape--chevron.arrow-shape--last {
padding-right: 1.5rem;
clip-path: polygon(
0 0,
100% 0,
100% 100%,
0 100%,
var(--arrow-tip-depth) 50%
);
}
/* Direction-Variants: spiegeln / 90deg-Rotation der polygon-Coords. */
.mypage .arrow-shape.arrow-shape--left {
padding-left: calc(var(--arrow-tip-depth) + 1rem);
padding-right: 1.5rem;
clip-path: polygon(
var(--arrow-tip-depth) 0,
100% 0,
100% 100%,
var(--arrow-tip-depth) 100%,
var(--arrow-tip-depth) calc(100% - var(--arrow-tip-inset)),
0 50%,
var(--arrow-tip-depth) var(--arrow-tip-inset)
);
}
.mypage .arrow-shape.arrow-shape--up {
padding-top: calc(var(--arrow-tip-depth) + 0.75rem);
padding-right: 1.5rem;
clip-path: polygon(
0 var(--arrow-tip-depth),
var(--arrow-tip-inset) var(--arrow-tip-depth),
50% 0,
calc(100% - var(--arrow-tip-inset)) var(--arrow-tip-depth),
100% var(--arrow-tip-depth),
100% 100%,
0 100%
);
}
.mypage .arrow-shape.arrow-shape--down {
padding-bottom: calc(var(--arrow-tip-depth) + 0.75rem);
padding-right: 1.5rem;
clip-path: polygon(
0 0,
100% 0,
100% calc(100% - var(--arrow-tip-depth)),
calc(100% - var(--arrow-tip-inset)) calc(100% - var(--arrow-tip-depth)),
50% 100%,
var(--arrow-tip-inset) calc(100% - var(--arrow-tip-depth)),
0 calc(100% - var(--arrow-tip-depth))
);
}
/* clip-path schneidet ALLES innerhalb des Elements ab — auch TipTap-
* Toolbars + Editor-Overlays die ueber den Card-Rand hinausragen.
* Wenn ein Descendant gerade von TipTap bearbeitet wird (tiptap-overlay
* vom InlineEditor via createPortal in den Click-Target gemounted),
* clip-path temporaer abschalten damit der Editor sichtbar bleibt.
*
* Specificity-Hinweis: muss alle Varianten-Selektoren (0,3,0)
* schlagen — daher Doppelung der arrow-shape-Klasse im Selector,
* was die Specificity auf 0,4,0 hebt (.mypage + .arrow-shape ×2
* + :has(.tiptap-overlay)). Damit gewinnt der Override gegen
* jede --chevron/--first/--last/--left/--up/--down Variante. */
.mypage .arrow-shape.arrow-shape:has(.tiptap-overlay),
.mypage .arrow-shape.arrow-shape:has([data-tiptap-loading]) {
clip-path: none;
overflow: visible;
z-index: 100;
}
/* ─── IconText (Mini-Inline-Slot) ──────────────────────────────────────
* ist Inline-Element. Sein Inhalt (Ziffer ODER
* inline-SVG aus dem TipTap-Icon-Picker) muss in BEIDEN Faellen sauber
* zentrieren — sowohl in einem flex-zentrierten Eltern (.step-bubble
* etc.) als auch standalone.
*
* Probleme die das loest:
* - Inline-SVG sitzt an der text-baseline (= unterhalb der visuellen
* Mitte), Ziffer hingegen am text-baseline mittig → asymmetrische
* Position abhaengig vom Content.
* - Inline-flex auf dem Span selbst sorgt dafuer, dass Text- und
* SVG-Content beide ueber die SAME Cross-Axis zentrieren.
* - SVG als display:block raus aus dem Inline-Flow → keine Baseline-
* Versetzung mehr, Hoehe folgt der SVG-Box statt der Linienhoehe.
*
* Anwendbar auf alle icontext-Spans system-weit (proc_*, step-card,
* trust_avatars-Initialen, beliebige Mini-Bubble-Verwendungen). */
.mypage [type="icontext"] {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
line-height: 1;
}
/* SVG-Mode: wenn der icontext-Slot ein Icon enthaelt, fuellt der Span
* den umgebenden Container (Bubble) komplett, und das SVG nimmt 60%
* der Container-Groesse. Damit ist die Icon-Groesse FEST mit der
* Bubble verbunden — egal wie gross die Bubble in pattern.css gesetzt
* wird, das Icon skaliert proportional mit (Daumenregel: 40% Atemraum
* zwischen Glyph und Kreisrand).
*
* Voraussetzung: der direkte Eltern-Layer (.step-bubble o.ae.) muss
* eine explizite Groesse haben — Prozentangaben relativieren sich gegen
* den naechsten gestylten Container. */
.mypage [type="icontext"]:has(> svg) {
width: 100%;
height: 100%;
}
.mypage [type="icontext"] > svg {
display: block;
width: 60%;
height: 60%;
}
/* RTE-Wrap-Safety-Net (Render-Mode only): TipTap/ProseMirror wickelt
* Inline-Text beim Edit in
...
(Block-Node-Pflicht im Schema).
* Im Render-Mode soll der
-Wrapper das Mini-Layout NICHT stoeren —
* display:contents macht ihn layout-transparent, der Inhalt rendert
* direkt als waere er Kind des icontext-Spans.
*
* WICHTIG: nur wenn KEIN aktiver Edit (data-tiptap-loading-Attribut
* fehlt). Waehrend des Edits ist das
der Block-Container fuer
* ProseMirror's Cursor; macht man's contents-only, verliert der
* Cursor seine Box und Typing/Delete verhalten sich seltsam
* (beobachtet: "1" loeschen → "3" tippen → nichts uebernommen). */
.mypage [type="icontext"]:not([data-tiptap-loading]) p {
display: contents;
}
/* ─── Social Pills ───────────────────────────────────────────────────
* Shared Pill-Style fuer Brand-Anchors (Facebook/Instagram/LinkedIn/…)
* in Footer-Patterns. Loest pattern-spezifische Duplikate ab
* (fe-social-btn, fn-social-link, …). Inhalt: