/*
 * Mein Astrolantis – zentrales Typografie-System
 *
 * Diese Datei wird nach app.css geladen und ist die verbindliche Quelle für
 * Schriftfamilien, Größen, Gewichte und Zeilenhöhen im gesamten Kundenbereich.
 * Neue Komponenten verwenden zuerst die --ma-type-Variablen oder eine der
 * semantischen .ma-type-* Klassen. Layout, Farben und Abstände bleiben in
 * app.css.
 */

:root {
    --ma-font-ui: Arial, Helvetica, sans-serif;
    --ma-font-editorial: Georgia, "Times New Roman", serif;

    --ma-type-display: clamp(2.75rem, 4.5vw, 3.75rem);
    --ma-type-page-title: clamp(2.375rem, 4vw, 3.25rem);
    --ma-type-feature-title: clamp(2.25rem, 3.8vw, 3.125rem);
    --ma-type-section-title: clamp(1.75rem, 2.8vw, 2.125rem);
    --ma-type-card-title: clamp(1.375rem, 2vw, 1.625rem);
    --ma-type-subtitle: 1.125rem;
    --ma-type-body-large: 1.125rem;
    --ma-type-body: 1rem;
    --ma-type-body-small: 0.875rem;
    --ma-type-label: 0.75rem;
    --ma-type-meta: 0.75rem;
    --ma-type-control: 0.875rem;

    --ma-leading-display: 1.06;
    --ma-leading-heading: 1.16;
    --ma-leading-body: 1.58;
    --ma-leading-compact: 1.4;

    --ma-weight-regular: 400;
    --ma-weight-medium: 600;
    --ma-weight-bold: 700;
    --ma-weight-heavy: 800;
    --ma-tracking-display: -0.025em;
    --ma-tracking-label: 0.1em;
}

.mein-astrolantis {
    color: var(--ink);
    font-family: var(--ma-font-ui);
    font-size: var(--ma-type-body);
    font-synthesis: none;
    line-height: var(--ma-leading-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mein-astrolantis :where(button, input, select, textarea) {
    font-family: inherit;
}

.mein-astrolantis :where(h1, h2, h3, h4, h5, h6) {
    text-wrap: balance;
}

.mein-astrolantis :where(p, li) {
    text-wrap: pretty;
}

/* Wiederverwendbare Rollen für neue Seiten und Komponenten. */
.mein-astrolantis .ma-type-display {
    font-family: var(--ma-font-ui);
    font-size: var(--ma-type-display);
    font-weight: var(--ma-weight-bold);
    letter-spacing: var(--ma-tracking-display);
    line-height: var(--ma-leading-display);
}

.mein-astrolantis .ma-type-page-title {
    font-family: var(--ma-font-ui);
    font-size: var(--ma-type-page-title);
    font-weight: var(--ma-weight-bold);
    letter-spacing: var(--ma-tracking-display);
    line-height: var(--ma-leading-display);
}

.mein-astrolantis .ma-type-feature-title {
    font-family: var(--ma-font-editorial);
    font-size: var(--ma-type-feature-title);
    font-weight: var(--ma-weight-regular);
    letter-spacing: -0.015em;
    line-height: var(--ma-leading-display);
}

.mein-astrolantis .ma-type-section-title {
    font-family: var(--ma-font-ui);
    font-size: var(--ma-type-section-title);
    font-weight: var(--ma-weight-bold);
    letter-spacing: -0.018em;
    line-height: var(--ma-leading-heading);
}

.mein-astrolantis .ma-type-card-title {
    font-family: var(--ma-font-editorial);
    font-size: var(--ma-type-card-title);
    font-weight: var(--ma-weight-regular);
    line-height: var(--ma-leading-heading);
}

.mein-astrolantis .ma-type-body-large {
    font-size: var(--ma-type-body-large);
    line-height: var(--ma-leading-body);
}

.mein-astrolantis .ma-type-body {
    font-size: var(--ma-type-body);
    line-height: var(--ma-leading-body);
}

.mein-astrolantis .ma-type-small {
    font-size: var(--ma-type-body-small);
    line-height: var(--ma-leading-compact);
}

.mein-astrolantis .ma-type-label,
.mein-astrolantis .eyebrow {
    font-size: var(--ma-type-label);
    font-weight: var(--ma-weight-heavy);
    letter-spacing: var(--ma-tracking-label);
    line-height: 1.25;
    text-transform: uppercase;
}

/* Gleichrangige Einleitungen im persönlichen Tagesblick. Die zentrale Rolle
 * überstimmt bewusst ältere, komponentenspezifische Pixelgrößen. */
.mein-astrolantis .daily-section-label {
    font-family: var(--ma-font-ui) !important;
    font-size: var(--ma-type-label) !important;
    font-weight: var(--ma-weight-heavy) !important;
    letter-spacing: var(--ma-tracking-label) !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
}

.mein-astrolantis .ma-type-meta {
    font-size: var(--ma-type-meta);
    line-height: var(--ma-leading-compact);
}

/* Luna: Die Modusauswahl folgt derselben zentralen Hierarchie wie alle
 * übrigen Produktbereiche und erfindet keine eigenen Pixelgrößen. */
.mein-astrolantis .toni-mode-choice h2 {
    font-family: var(--ma-font-ui);
    font-size: var(--ma-type-section-title);
    font-weight: var(--ma-weight-bold);
    letter-spacing: -0.018em;
    line-height: var(--ma-leading-heading);
}

.mein-astrolantis .toni-mode-choice > div:first-child > p,
.mein-astrolantis .toni-mode-choice__options strong {
    font-size: var(--ma-type-body);
    line-height: var(--ma-leading-compact);
}

.mein-astrolantis .toni-mode-choice > div:first-child > small,
.mein-astrolantis .toni-mode-choice__options small {
    font-size: var(--ma-type-body-small);
    line-height: var(--ma-leading-compact);
}

/* Seitentitel: im ganzen Bereich dieselbe visuelle Hierarchie. */
.mein-astrolantis :is(
    .auth-card h1,
    .single-card h1,
    .account-welcome h1,
    .profile-setup__top h1,
    .daily-focus__welcome h1
) {
    font-family: var(--ma-font-ui);
    font-size: var(--ma-type-page-title);
    font-weight: var(--ma-weight-bold);
    letter-spacing: var(--ma-tracking-display);
    line-height: var(--ma-leading-display);
}

/* Neue Produktseiten verwenden dieselben zentralen Rollen. */
.mein-astrolantis .relationship-hero h1 {
    font-family: var(--ma-font-editorial);
    font-size: var(--ma-type-feature-title);
    font-weight: var(--ma-weight-regular);
    letter-spacing: -0.015em;
    line-height: var(--ma-leading-display);
}

.mein-astrolantis :is(
    .relationship-results > header h2,
    .relationship-add > header h2
) {
    font-family: var(--ma-font-editorial);
    font-size: var(--ma-type-section-title);
    font-weight: var(--ma-weight-regular);
    line-height: var(--ma-leading-heading);
}

.mein-astrolantis :is(
    .relationship-teaser h3,
    .relationship-paywall > h3
) {
    font-family: var(--ma-font-editorial);
    font-size: var(--ma-type-card-title);
    font-weight: var(--ma-weight-regular);
    line-height: var(--ma-leading-heading);
}

.mein-astrolantis .auth-card h1 {
    font-size: var(--ma-type-display);
}

.mein-astrolantis .welcome-prefix {
    font-family: var(--ma-font-ui);
    font-size: 0.42em;
    font-weight: var(--ma-weight-bold);
    letter-spacing: 0;
    line-height: 1.2;
}

/* Große, redaktionelle Tagesmotive dürfen bewusst wärmer wirken. */
.mein-astrolantis :is(
    .daily-focus__essence > h3,
    .daily-compass > header h3,
    .forecast-theme__body > header h3,
    .daily-aspect__meaning h4
) {
    font-family: var(--ma-font-editorial);
    font-weight: var(--ma-weight-regular);
    letter-spacing: -0.015em;
    line-height: var(--ma-leading-heading);
}

.mein-astrolantis .daily-focus__essence > h3 {
    font-size: var(--ma-type-feature-title);
    line-height: var(--ma-leading-display);
}

.mein-astrolantis :is(
    .daily-focus__title h2,
    .daily-aspects > header h3,
    .daily-life__heading h3
) {
    font-family: var(--ma-font-ui);
    font-size: var(--ma-type-section-title);
    font-weight: var(--ma-weight-bold);
    letter-spacing: -0.018em;
    line-height: var(--ma-leading-heading);
}

.mein-astrolantis :is(
    .dashboard-section__heading h2,
    .setup-question h2,
    .email-settings h2,
    .settings-heading h2
) {
    font-family: var(--ma-font-ui);
    font-size: var(--ma-type-card-title);
    font-weight: var(--ma-weight-bold);
    letter-spacing: -0.012em;
    line-height: var(--ma-leading-heading);
}

.mein-astrolantis :is(
    .daily-compass > header h3,
    .forecast-theme__body > header h3,
    .daily-aspect__meaning h4
) {
    font-size: var(--ma-type-card-title);
}

/* Fließtext und Einleitungen. */
.mein-astrolantis :is(
    .auth-card__intro > p,
    .single-card > p,
    .account-welcome__copy > p,
    .daily-focus__welcome p
) {
    font-family: var(--ma-font-ui);
    font-size: var(--ma-type-body-large);
    line-height: var(--ma-leading-body);
}

.mein-astrolantis :is(
    .daily-focus__essence p,
    .forecast-theme__text p,
    .daily-aspect__meaning > p
) {
    font-size: var(--ma-type-body);
    line-height: var(--ma-leading-body);
}

.mein-astrolantis :is(
    .daily-compass > header p,
    .daily-aspects > header p,
    .daily-life__heading p,
    .setup-question p,
    .birth-chart-intro,
    .settings-heading p,
    .session-explanation,
    .notice
) {
    font-size: var(--ma-type-body-small);
    line-height: var(--ma-leading-body);
}

/* Bedienelemente bleiben überall gleich groß und springen bei Hover nicht. */
.mein-astrolantis :is(
    .primary-button,
    .secondary-button,
    .google-login-button,
    .passkey-button,
    .setup-next
) {
    font-family: var(--ma-font-ui);
    font-size: var(--ma-type-body);
    font-weight: var(--ma-weight-heavy);
    letter-spacing: 0;
    line-height: 1.25;
}

.mein-astrolantis :is(
    .primary-button,
    .secondary-button,
    .google-login-button,
    .passkey-button,
    .setup-next
):is(:hover, :focus-visible, :active) {
    font-size: var(--ma-type-body);
}

.mein-astrolantis :is(.form-field > span, .setup-field > span) {
    font-size: var(--ma-type-body-small);
    font-weight: var(--ma-weight-heavy);
    line-height: var(--ma-leading-compact);
}

.mein-astrolantis :is(.form-field input, .setup-field input) {
    font-size: 1rem;
    line-height: 1.35;
}

/* Navigation, Status und erläuternde Kleinschrift. */
.mein-astrolantis :is(
    .account-app-header__status strong,
    .account-app-menu__navigation a,
    .account-app-menu__navigation button,
    .access-steps strong,
    .security-state strong
) {
    font-size: var(--ma-type-body-small);
    line-height: var(--ma-leading-compact);
}

.mein-astrolantis :is(
    .account-app-header__status small,
    .account-app-menu__identity small,
    .access-steps small,
    .security-state small,
    .form-note,
    .privacy-hint,
    .setup-privacy
) {
    font-size: var(--ma-type-meta);
    line-height: var(--ma-leading-compact);
}

.mein-astrolantis .account-app-menu__identity strong {
    font-size: var(--ma-type-subtitle);
    line-height: var(--ma-leading-heading);
}

/* Astrologische Erläuterungen: klein, aber noch gut lesbar. */
.mein-astrolantis :is(
    .daily-aspect__phase,
    .daily-aspect__type,
    .aspect-legend__item small,
    .daily-aspect__timing li span,
    .daily-aspect__timing li time,
    .daily-energy-scale
) {
    font-size: var(--ma-type-meta);
    line-height: var(--ma-leading-compact);
}

.mein-astrolantis :is(
    .aspect-legend__item strong,
    .daily-aspect__timing > strong,
    .daily-aspect__timing > p,
    .daily-energy-score strong,
    .daily-energy-score strong small
) {
    font-size: var(--ma-type-label);
    line-height: var(--ma-leading-compact);
}

.mein-astrolantis .daily-moon small {
    font-size: var(--ma-type-meta);
    line-height: var(--ma-leading-compact);
}

.mein-astrolantis .daily-moon strong {
    font-size: 1rem;
    line-height: var(--ma-leading-heading);
}

.mein-astrolantis .daily-moon em,
.mein-astrolantis .daily-moon__events p {
    font-size: var(--ma-type-meta);
    line-height: var(--ma-leading-compact);
}

/* Herkunft, Berechnung und rechtlich relevante Erklärungen sind echte
 * Informationen und keine Mikro-Beschriftungen. Sie bleiben dezent, aber auf
 * allen Bildschirmgrößen ohne Zoomen lesbar. */
.mein-astrolantis :is(
    .forecast-method,
    .outlook-dialog__fineprint,
    .relationship-disclaimer,
    .relationship-paywall__pending
) {
    font-size: var(--ma-type-body-small) !important;
    line-height: var(--ma-leading-body) !important;
}

.mein-astrolantis .site-footer {
    font-size: var(--ma-type-meta);
    line-height: var(--ma-leading-compact);
}

@media (max-width: 780px) {
    :root {
        --ma-type-display: 2.375rem;
        --ma-type-page-title: 2rem;
        --ma-type-feature-title: 2rem;
        --ma-type-section-title: 1.625rem;
        --ma-type-card-title: 1.3125rem;
        --ma-type-subtitle: 1.0625rem;
        --ma-type-body-large: 1.0625rem;
        --ma-type-body: 1rem;
        --ma-type-body-small: 0.875rem;
        --ma-type-label: 0.75rem;
        --ma-type-meta: 0.75rem;
        --ma-type-control: 0.875rem;
    }

    .mein-astrolantis :is(
        .primary-button,
        .secondary-button,
        .google-login-button,
        .passkey-button,
        .setup-next
    ),
    .mein-astrolantis :is(
        .primary-button,
        .secondary-button,
        .google-login-button,
        .passkey-button,
        .setup-next
    ):is(:hover, :focus-visible, :active) {
        font-size: 0.875rem;
    }
}

/*
 * Verbindlicher Typografie-Vertrag (Version 2)
 *
 * app.css darf Komponenten anordnen und dekorieren. Die sichtbare
 * Texthierarchie kommt ausschließlich aus diesen Rollen. Die !important-
 * Regeln sind hier bewusst gesetzt: Sie neutralisieren historische
 * komponentenspezifische 7–11-px-Werte, ohne Icon-Größen anzutasten.
 */
.mein-astrolantis {
    font-size: var(--ma-type-body);
}

/* Semantische Grundhierarchie: Überschriften folgen ihrer HTML-Ebene. */
.mein-astrolantis :where(h1) {
    font-family: var(--ma-font-ui) !important;
    font-size: var(--ma-type-page-title) !important;
    font-weight: var(--ma-weight-bold) !important;
    letter-spacing: var(--ma-tracking-display) !important;
    line-height: var(--ma-leading-display) !important;
}

.mein-astrolantis :where(h2) {
    font-family: var(--ma-font-ui) !important;
    font-size: var(--ma-type-section-title) !important;
    font-weight: var(--ma-weight-bold) !important;
    letter-spacing: -0.018em !important;
    line-height: var(--ma-leading-heading) !important;
}

.mein-astrolantis :where(h3) {
    font-family: var(--ma-font-editorial) !important;
    font-size: var(--ma-type-card-title) !important;
    font-weight: var(--ma-weight-regular) !important;
    letter-spacing: -0.012em !important;
    line-height: var(--ma-leading-heading) !important;
}

.mein-astrolantis :where(h4, h5, h6) {
    font-family: var(--ma-font-ui) !important;
    font-size: var(--ma-type-subtitle) !important;
    font-weight: var(--ma-weight-bold) !important;
    line-height: var(--ma-leading-heading) !important;
}

/* Lesetext fällt im Kundenbereich niemals unter 16 px. */
.mein-astrolantis :where(p, li, dd) {
    font-size: var(--ma-type-body) !important;
    line-height: var(--ma-leading-body) !important;
}

/* Ergänzende Informationen bleiben sichtbar, aber klar nachgeordnet. */
.mein-astrolantis :where(small, time) {
    font-size: var(--ma-type-meta) !important;
    line-height: var(--ma-leading-compact) !important;
}

.mein-astrolantis :where(label, legend) {
    font-size: var(--ma-type-body-small) !important;
    line-height: var(--ma-leading-compact) !important;
}

/* Eingaben bleiben auf Mobilgeräten bei mindestens 16 px und zoomen nicht. */
.mein-astrolantis :where(input, select, textarea) {
    font-size: 1rem !important;
    line-height: 1.4 !important;
}

.mein-astrolantis :where(button) {
    font-size: var(--ma-type-control) !important;
    line-height: 1.25 !important;
}

/* Luna-Sprachgespräch: dieselben zentralen Rollen wie der restliche Bereich. */
.mein-astrolantis .toni-voice__start strong,
.mein-astrolantis .toni-voice__copy strong {
    font-size: var(--ma-type-body) !important;
    line-height: var(--ma-leading-compact) !important;
}

.mein-astrolantis .toni-voice__start small,
.mein-astrolantis .toni-voice__copy small,
.mein-astrolantis .toni-voice__note {
    font-size: var(--ma-type-body-small) !important;
    line-height: var(--ma-leading-compact) !important;
}

.mein-astrolantis :is(.toni-voice__stop, .toni-voice__audio) {
    font-size: var(--ma-type-control) !important;
    line-height: 1.25 !important;
}

/* Wiederverwendbare Rollen überschreiben die semantische Grundstufe. */
.mein-astrolantis :where(.ma-type-display) {
    font-size: var(--ma-type-display) !important;
}

.mein-astrolantis :where(.ma-type-page-title) {
    font-size: var(--ma-type-page-title) !important;
}

.mein-astrolantis :where(.ma-type-feature-title) {
    font-family: var(--ma-font-editorial) !important;
    font-size: var(--ma-type-feature-title) !important;
    font-weight: var(--ma-weight-regular) !important;
}

.mein-astrolantis :where(.ma-type-section-title) {
    font-size: var(--ma-type-section-title) !important;
}

.mein-astrolantis :where(.ma-type-card-title) {
    font-size: var(--ma-type-card-title) !important;
}

.mein-astrolantis :where(.ma-type-body-large) {
    font-size: var(--ma-type-body-large) !important;
}

.mein-astrolantis :where(.ma-type-body) {
    font-size: var(--ma-type-body) !important;
}

.mein-astrolantis :where(.ma-type-small) {
    font-size: var(--ma-type-body-small) !important;
}

.mein-astrolantis :where(.ma-type-label, .eyebrow, .daily-section-label) {
    font-family: var(--ma-font-ui) !important;
    font-size: var(--ma-type-label) !important;
    font-weight: var(--ma-weight-heavy) !important;
    letter-spacing: var(--ma-tracking-label) !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
}

.mein-astrolantis :where(.ma-type-meta) {
    font-size: var(--ma-type-meta) !important;
}

.mein-astrolantis :where(.ma-type-action) {
    font-family: var(--ma-font-ui) !important;
    font-size: var(--ma-type-control) !important;
    font-weight: var(--ma-weight-heavy) !important;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
}

/* Bewusste Produktrollen: große emotionale Titel und zentrale Einstiege. */
.mein-astrolantis :is(
    .auth-card h1,
    .daily-focus__essence > h3,
    .relationship-hero h1,
    .outlook-result__hero h1
) {
    font-family: var(--ma-font-editorial) !important;
    font-size: var(--ma-type-feature-title) !important;
    font-weight: var(--ma-weight-regular) !important;
    line-height: var(--ma-leading-display) !important;
}

.mein-astrolantis :is(
    .daily-focus__title h2,
    .daily-aspects > header h3,
    .daily-life__heading h3,
    .relationship-results > header h2,
    .relationship-add > header h2,
    .outlook-history > header h2
) {
    font-family: var(--ma-font-ui) !important;
    font-size: var(--ma-type-section-title) !important;
    font-weight: var(--ma-weight-bold) !important;
}

.mein-astrolantis :is(.toni-launch h3, .daily-question h3) {
    font-family: var(--ma-font-editorial) !important;
    font-size: var(--ma-type-card-title) !important;
    font-weight: var(--ma-weight-regular) !important;
}

.mein-astrolantis :is(
    .daily-focus__welcome p,
    .daily-focus__essence p,
    .relationship-hero > p,
    .outlook-result__hero > p,
    .toni-intro p
) {
    font-size: var(--ma-type-body-large) !important;
}

/* Dezent, aber nicht winzig: technische, rechtliche und methodische Hinweise. */
.mein-astrolantis :is(
    .form-note,
    .privacy-hint,
    .setup-privacy,
    .forecast-method,
    .outlook-dialog__fineprint,
    .relationship-disclaimer,
    .relationship-paywall__pending,
    .toni-window__privacy,
    .purchases-profile__privacy,
    .site-footer p,
    .site-footer a
) {
    font-size: var(--ma-type-body-small) !important;
    line-height: var(--ma-leading-compact) !important;
}

/* Aktionen und Aktionslinks bilden eine einheitliche Bedienebene. */
.mein-astrolantis :is(
    .primary-button,
    .secondary-button,
    .google-login-button,
    .passkey-button,
    .setup-next,
    .toni-launch > a,
    .toni-message-action,
    .daily-question > a,
    .outlook-products button,
    .relationship-prices button
) {
    font-size: var(--ma-type-control) !important;
    font-weight: var(--ma-weight-heavy) !important;
    line-height: 1.25 !important;
}