/* ============================================================================
   SymptomAI Template — theme.css
   Design system based on the Figma source. Sits on top of Bootstrap 5.

   Usage in articles: editors compose pages from the block classes below
   (.sai-hero, .sai-card, .sai-stat-trio, etc.). See docs/BLOCK-LIBRARY.md
   for ready-to-paste HTML snippets.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */
:root {
    /* Brand palette */
    --sai-brand:           #455c9f;   /* SYMPTOM-AI logo */
    --sai-primary:         #456ddf;   /* links, active states */
    --sai-primary-rgb:     69, 109, 223;
    --sai-deep:            #00478d;   /* dark accent in headings, CTAs */
    --sai-deep-rgb:        0, 71, 141;

    /* Surfaces */
    --sai-bg:              #ffffff;
    --sai-bg-tint:         #f7f9ff;   /* hero / page bg tint */
    --sai-bg-tint-2:       #eef3ff;   /* alt section bg */
    --sai-bg-card:         #ffffff;
    --sai-bg-card-blue:    #dae3ff;   /* tinted cards (mediziner card) */
    --sai-bg-card-deep:    #00478d;   /* dark-blue CTA card */
    --sai-bg-grey:         #ececec;   /* "Bitte wählen Sie" band (Figma grey strip) */

    /* Text */
    --sai-text:            #181c20;
    --sai-text-muted:      #4f5c6f;
    --sai-text-nav:        #4d5b6e;
    --sai-text-on-deep:    #ffffff;

    /* Borders */
    --sai-border:          #e5e7eb;
    --sai-border-blue:     #c5d3f7;

    /* Effects */
    --sai-shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.06);
    --sai-shadow-md:       0 4px 4px rgba(0, 0, 0, 0.08);
    /* Role cards on Startseite (Figma: 0 4px 4px / 25%) */
    --sai-shadow-role:     0 4px 4px rgba(0, 0, 0, 0.25);
    --sai-shadow-card:     0 4px 16px rgba(13, 24, 60, 0.08);

    /* Geometry */
    --sai-radius-sm:       8px;
    --sai-radius:          16px;
    --sai-radius-lg:       20px;
    --sai-radius-pill:     999px;

    /* Spacing */
    --sai-section-y:       clamp(2.5rem, 5vw, 4.5rem);

    /* Fonts */
    --sai-font-family:     "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ----------------------------------------------------------------------------
   2. Base / typography
   ------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
    /* Avoid header/nav jumping when a vertical scrollbar appears after paint (fresh load vs. cached). */
    scrollbar-gutter: stable;
}

body {
    font-family: var(--sai-font-family);
    color: var(--sai-text);
    background-color: var(--sai-bg);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

body.is-home { background-color: var(--sai-bg); }

h1, h2, h3, h4, h5, h6 {
    color: var(--sai-deep);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.15rem; }

a {
    color: var(--sai-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover { color: var(--sai-deep); text-decoration: underline; }

p { color: var(--sai-text-muted); }

/* Skip link */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1080;
    padding: 0.5rem 1rem;
    background: var(--sai-primary);
    color: #fff;
}

/* ----------------------------------------------------------------------------
   3. Header / brand / navigation
   ------------------------------------------------------------------------- */
.sai-header {
    background: var(--sai-bg);
    border-bottom: none;
}
.sai-header.is-sticky {
    position: sticky;
    top: 0;
    z-index: 1020;
    backdrop-filter: saturate(140%) blur(8px);
    background: rgba(255, 255, 255, 0.92);
}
.sai-header.is-sticky.is-scrolled { box-shadow: var(--sai-shadow-sm); }

.sai-brand { color: var(--sai-brand); }
.sai-brand__logo {
    height: 36px;
    width: auto;
    max-width: min(200px, 46vw);
    display: block;
    object-fit: contain;
}
.sai-header .navbar-brand .sai-brand__logo {
    max-width: min(200px, 42vw);
}
.sai-brand__text {
    color: var(--sai-brand);
    font-weight: 700;
    /* Scale down on narrow headers so the hamburger stays visible beside the wordmark */
    font-size: clamp(1.125rem, 4.2vw, 1.75rem);
    letter-spacing: 0.02em;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

/* Bootstrap 5 navbar shell (see index.php). Mobile open/close: class sai-nav-is-open
   on #saiMainNavCollapse — inline script + rules below (no Bootstrap Collapse plugin). */
.sai-header .sai-header__navbar {
    padding-top: 1rem;
    padding-bottom: 1rem;
    align-items: center;
    /* Phones: allow brand + toggler to wrap only if the bar is extremely narrow. */
    flex-wrap: wrap;
}
.sai-header .navbar-brand {
    margin-bottom: 0;
    min-width: 0;
    /* Mobile: grow so the hamburger stays at the trailing edge. */
    flex: 1 1 auto;
}
.sai-header .navbar-toggler {
    flex-shrink: 0;
    position: relative;
    z-index: 1055;
    cursor: pointer;
    touch-action: manipulation;
}
.sai-navbar-toggler {
    border-color: var(--sai-border);
    flex-shrink: 0;
}
/* Mobile: flyout below the bar (absolute) — in-flow flex + BS navbar rules often clip or
   zero-height the link stack while still reserving space (content “jumps” but links vanish). */
@media (max-width: 991.98px) {
    /* Contain the flyout; core/template CSS sometimes sets .navbar position otherwise. */
    .sai-header .sai-header__navbar {
        position: relative !important;
        z-index: 1;
    }
    .sai-header #saiMainNavCollapse:not(.sai-nav-is-open) {
        display: none !important;
    }
    .sai-header #saiMainNavCollapse.sai-nav-is-open {
        display: flex !important;
        flex-direction: column;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        width: 100%;
        margin-top: 0;
        padding: 0.5rem 0 1rem;
        z-index: 1060;
        background: var(--sai-bg);
        border: 1px solid var(--sai-border);
        border-radius: 0 0 var(--sai-radius) var(--sai-radius);
        box-shadow: var(--sai-shadow-md);
    }
    .sai-header #saiMainNavCollapse.sai-nav-is-open #sai-main-nav {
        width: 100%;
        display: block;
    }
    /* Joomla often wraps mod_menu in .mod-menu; admins sometimes add d-none d-lg-block so the
       same module is “desktop only” — that leaves the flyout empty on phones unless we win here. */
    .sai-header #saiMainNavCollapse.sai-nav-is-open #sai-main-nav > * {
        display: block !important;
    }
    /* Beat any stray .collapse / .navbar-nav rules from core CSS; any ul (override or core). */
    .sai-header #saiMainNavCollapse.sai-nav-is-open #sai-main-nav ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        width: 100% !important;
        flex-wrap: nowrap !important;
        gap: 0.25rem;
        margin: 0;
        padding: 0.75rem 0 0;
        border-top: 1px solid var(--sai-border);
    }
    .sai-header #saiMainNavCollapse.sai-nav-is-open .sai-nav__item {
        display: block !important;
        width: 100%;
    }
    .sai-header #saiMainNavCollapse.sai-nav-is-open .sai-nav__link {
        display: block !important;
        padding: 0.5rem 0.25rem;
        color: var(--sai-text-nav) !important;
    }
    /* Links from core menu layout (no sai-nav__link) */
    .sai-header #saiMainNavCollapse.sai-nav-is-open #sai-main-nav a {
        display: block !important;
        padding: 0.5rem 0.25rem;
        color: var(--sai-text-nav) !important;
    }
    /* Duplicate mod_menu above the footer is common (same menu published to footer-* or
       main-bottom). Header flyout is the only main nav on small screens. Override: set the
       menu module’s “Class Suffix” to `sai-show-mobile` (→ `mod-menu_sai-show-mobile` on ul). */
    .sai-footer .mod-menu:not([class*="sai-show-mobile"]),
    .sai-section--main-bottom .mod-menu:not([class*="sai-show-mobile"]),
    .sai-section--features .mod-menu:not([class*="sai-show-mobile"]) {
        display: none !important;
    }
}
/* Desktop: single-row bar — brand left, menu right (no unpredictable wrap from flex-wrap). */
@media (min-width: 992px) {
    .sai-header .sai-header__navbar {
        flex-wrap: nowrap;
    }
    .sai-header .navbar-brand {
        flex: 0 1 auto;
        margin-right: auto;
    }
    .sai-header #saiMainNavCollapse {
        display: flex !important;
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
        justify-content: flex-end;
        align-items: center;
    }
}

/* Main navigation (rendered by mod_menu with template override) */
.sai-nav { font-size: 0.9375rem; /* 15px — Figma nav */ }
.sai-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
    flex-wrap: wrap;
}
@media (min-width: 992px) {
    .sai-nav__list {
        flex-wrap: nowrap;
        justify-content: flex-end;
    }
}
.sai-nav__item { position: relative; }
.sai-nav__link {
    display: inline-block;
    color: var(--sai-text-nav);
    font-weight: 500;
    padding: 0.25rem 0;
    text-decoration: none;
    transition: color 0.15s ease;
}
.sai-nav__link:hover { color: var(--sai-primary); text-decoration: none; }
.sai-nav__item.current > .sai-nav__link,
.sai-nav__item.active  > .sai-nav__link {
    color: var(--sai-primary);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

/* ----------------------------------------------------------------------------
   4. Section helpers
   ------------------------------------------------------------------------- */
.sai-section { padding-block: var(--sai-section-y); }
.sai-section--tint  { background: var(--sai-bg-tint); }
.sai-section--tint-2{ background: var(--sai-bg-tint-2); }
.sai-section--grey  {
    position: relative;
    background: var(--sai-bg-grey);
    overflow: hidden;
}
/* Soft wave / blend from Figma (Rectangle 17) */
.sai-section--grey::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(160%, 1416px);
    height: min(52vw, 320px);
    background-image: url('../../../images/symptomai/home-grey-section-deco.svg');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
    pointer-events: none;
    opacity: 0.85;
}
.sai-section--grey > .container {
    position: relative;
    z-index: 1;
}

/* Homepage "Bitte wählen …" — Figma: 25px medium, muted (body copy, not a heading) */
.sai-role-band__intro,
.sai-section--grey > .container > h2,
.sai-section--grey > .container > .h4 {
    color: var(--sai-text-muted);
    font-weight: 500;
    font-size: 1.5625rem;
    line-height: 1.25;
    margin-top: 0;
}
.sai-section--deep  {
    background: var(--sai-bg-card-deep);
    color: var(--sai-text-on-deep);
}
.sai-section--deep h1,
.sai-section--deep h2,
.sai-section--deep h3,
.sai-section--deep p { color: #fff; }

.sai-eyebrow {
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--sai-primary);
    margin-bottom: 0.5rem;
}

.sai-section-title {
    color: var(--sai-deep);
    margin-bottom: 1rem;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.sai-section-lede { color: var(--sai-text-muted); font-size: 1.05rem; max-width: 70ch; }
/* Figma intro paragraphs (e.g. Fragebogen hero block): 25px body */
.sai-section-lede--lg {
    font-size: 1.5625rem;
    line-height: 1.45;
    font-weight: 400;
    max-width: 70ch;
}

/* ----------------------------------------------------------------------------
   5. Block — Hero (homepage)
   ------------------------------------------------------------------------- */
.sai-hero {
    position: relative;
    /* Figma: flat #f7f9ff hero panel (no gradient to white) */
    background: var(--sai-bg-tint);
    padding-block: clamp(2.5rem, 6vw, 5rem);
    overflow: hidden;
}
.sai-hero__inner {
    display: grid;
    gap: 2rem;
    align-items: center;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 992px) {
    .sai-hero__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
.sai-hero__title {
    font-weight: 800;
    /* Figma headline: 40px */
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.2;
    color: var(--sai-text);
}
.sai-hero__title .accent {
    color: var(--sai-deep);
    font-weight: 700;
}
.sai-hero__lede {
    margin-top: 1.5rem;
    /* Figma body intro: 25px */
    font-size: 1.5625rem;
    line-height: 1.45;
    font-weight: 400;
    color: var(--sai-text-muted);
    max-width: 48rem;
}
.sai-hero__lede strong {
    display: block;
    margin-bottom: 0.35em;
    font-weight: 600;
    color: var(--sai-text-muted);
}
.sai-hero__lede .sai-hero__lede-brand {
    font-weight: 800;
    color: var(--sai-text);
}
.sai-hero__media img { max-width: 100%; height: auto; }

/* ----------------------------------------------------------------------------
   6. Block — Generic card
   ------------------------------------------------------------------------- */
.sai-card {
    background: var(--sai-bg-card);
    border-radius: var(--sai-radius-lg);
    box-shadow: var(--sai-shadow-card);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border: 1px solid var(--sai-border);
    min-width: 0;
    overflow: hidden;
    overflow-wrap: break-word;
    word-wrap: break-word;
    /* Headings inherit this — avoid auto-hyphens on titles (ugly mid-word breaks). */
    hyphens: none;
    -webkit-hyphens: none;
}
.sai-card p,
.sai-card li {
    hyphens: auto;
    -webkit-hyphens: auto;
}
.sai-card + .sai-card { margin-top: 1.25rem; }
.sai-card__title {
    color: var(--sai-deep);
    margin: 0 0 0.75rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
    line-height: 1.25;
    hyphens: none;
    -webkit-hyphens: none;
    word-break: normal;
}
.sai-card__icon {
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--sai-radius-sm);
    background: var(--sai-bg-card-blue);
    color: var(--sai-deep);
    margin-bottom: 0.75rem;
}

.sai-card--tinted   { background: var(--sai-bg-tint-2); border-color: var(--sai-border-blue); }
.sai-card--blue     { background: var(--sai-bg-card-blue); border-color: var(--sai-border-blue); }
.sai-card--deep     {
    background: var(--sai-bg-card-deep); color: #fff; border: none;
}
.sai-card--deep .sai-card__title,
.sai-card--deep p,
.sai-card--deep li { color: #fff; }

.sai-card--accent-left {
    border-left: 4px solid var(--sai-primary);
    /* Match .sai-card rounding so the strip + corners align visually */
    border-radius: var(--sai-radius-lg);
}

/* Disclaimer / notice variant */
.sai-disclaimer {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 1rem;
    align-items: start;
    padding: 1.5rem 1.75rem;
    background: var(--sai-bg-tint-2);
    border: 1px solid var(--sai-border-blue);
    border-radius: var(--sai-radius);
}
.sai-disclaimer__icon {
    width: 48px; height: 48px;
    border-radius: var(--sai-radius-sm);
    background: #fff;
    border: 1px solid var(--sai-border-blue);
    display: flex; align-items: center; justify-content: center;
    color: var(--sai-deep);
}
.sai-disclaimer__title {
    color: var(--sai-deep);
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 700;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.sai-disclaimer p { margin-bottom: 0; color: var(--sai-text-muted); }

/* ----------------------------------------------------------------------------
   7. Block — Card grids (2/3-up)
   ------------------------------------------------------------------------- */
.sai-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
}
/* Grid items: min-width 0 + column flex so row height passes through optional CMS wrappers. */
.sai-grid > * {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
/* Equal-height cards — direct or wrapped (Joomla/editor sometimes adds a div around each card). */
.sai-grid > .sai-card,
.sai-grid > * > .sai-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}
.sai-grid > .sai-card > p:last-of-type,
.sai-grid > * > .sai-card > p:last-of-type {
    flex: 1 1 auto;
    margin-bottom: 0;
}
.sai-grid--2 { grid-template-columns: minmax(0, 1fr); }
.sai-grid--3 { grid-template-columns: minmax(0, 1fr); }
.sai-grid--4 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
    .sai-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sai-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sai-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /*
     * Equal-height cards: rely on CSS Grid's own row-sizing (all cells in a row
     * grow to the tallest sibling).  align-self:stretch is the default, but we
     * force it with !important so Bootstrap's align-self:start can't win.
     *
     * Do NOT set height:100% or min-height:100% on grid items — those resolve
     * against the grid container's explicit height (which is auto here), not the
     * row-track height, so they collapse to content size and break the stretch.
     */
    .sai-grid--2 > *,
    .sai-grid--3 > *,
    .sai-grid--4 > * {
        align-self: stretch !important;
    }
    /* Cards that are direct grid items: box-sizing only, no explicit height. */
    .sai-grid--2 > .sai-card,
    .sai-grid--3 > .sai-card,
    .sai-grid--4 > .sai-card {
        box-sizing: border-box;
    }
    /* Cards one wrapper deep: the wrapper fills the row via grid-stretch; the
       card fills the wrapper via flex-grow (wrapper already has display:flex). */
    .sai-grid--2 > * > .sai-card,
    .sai-grid--3 > * > .sai-card,
    .sai-grid--4 > * > .sai-card {
        flex: 1 1 auto;
        box-sizing: border-box;
    }
    /* Deeper wrapper (rare): stretch any direct row child that contains a .sai-card */
    .sai-grid--2 > *:has(.sai-card),
    .sai-grid--3 > *:has(.sai-card),
    .sai-grid--4 > *:has(.sai-card) {
        align-self: stretch !important;
    }
    .sai-grid--2 > *:has(.sai-card) .sai-card,
    .sai-grid--3 > *:has(.sai-card) .sai-card,
    .sai-grid--4 > *:has(.sai-card) .sai-card {
        flex: 1 1 auto;
    }
}
@media (min-width: 1100px) {
    .sai-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ----------------------------------------------------------------------------
   8. Block — Stat trio (10% / 20-59 / 200…)
   ------------------------------------------------------------------------- */
.sai-stat-trio {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
}
.sai-stat-trio > * {
    min-width: 0;
}
@media (min-width: 768px) { .sai-stat-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.sai-stat {
    background: var(--sai-bg-tint-2);
    border-radius: var(--sai-radius);
    padding: 1.5rem;
    text-align: center;
    border: 1px solid var(--sai-border-blue);
    overflow: hidden;
    min-width: 0;
}
.sai-stat__value {
    color: var(--sai-deep);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.5rem;
}
.sai-stat__label { color: var(--sai-text-muted); font-size: 0.95rem; margin-bottom: 0; }

/* ----------------------------------------------------------------------------
   9. Block — Numbered grid (01-04 cards)
   ------------------------------------------------------------------------- */
.sai-numbered { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .sai-numbered { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sai-numbered__item {
    background: #fff;
    border: 1px solid var(--sai-border);
    border-radius: var(--sai-radius);
    padding: 1.25rem 1.5rem;
}
.sai-numbered__num {
    color: var(--sai-primary);
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: 0.5rem;
}
.sai-numbered__title {
    color: var(--sai-deep);
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

/* ----------------------------------------------------------------------------
   10. Block — Stepper (numbered staircase)
   ------------------------------------------------------------------------- */
.sai-steps { display: flex; flex-direction: column; gap: 0.75rem; }
.sai-steps__item {
    background: var(--sai-bg-tint-2);
    border-radius: var(--sai-radius);
    padding: 1rem 1.25rem;
    color: var(--sai-text);
    font-weight: 500;
    border: 1px solid var(--sai-border-blue);
}
@media (min-width: 768px) {
    /* Visual staircase: each step indented progressively */
    .sai-steps__item:nth-child(1) { margin-right: 30%; }
    .sai-steps__item:nth-child(2) { margin-left: 6%; margin-right: 18%; }
    .sai-steps__item:nth-child(3) { margin-left: 12%; margin-right: 0%; }
    .sai-steps__item:nth-child(4) { margin-left: 0; margin-right: 0; }
}
.sai-steps__num {
    color: var(--sai-primary);
    font-weight: 800;
    margin-right: 0.4rem;
}

/* ----------------------------------------------------------------------------
   11. Block — Process (3 horizontal steps with optional icon)
   ------------------------------------------------------------------------- */
.sai-process { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
.sai-process > * {
    min-width: 0;
}
@media (min-width: 768px) { .sai-process { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sai-process__step {
    background: #fff;
    border: 1px solid var(--sai-border);
    border-radius: var(--sai-radius);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    min-width: 0;
}
.sai-process__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 999px;
    background: var(--sai-primary); color: #fff;
    font-weight: 700; margin-bottom: 0.75rem;
}

/* ----------------------------------------------------------------------------
   12. Block — Quote
   ------------------------------------------------------------------------- */
.sai-quote {
    background: var(--sai-bg-tint-2);
    border-left: 4px solid var(--sai-primary);
    border-radius: var(--sai-radius);
    padding: 1.25rem 1.5rem;
    color: var(--sai-deep);
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.5;
}
.sai-quote cite {
    display: block;
    margin-top: 0.5rem;
    font-style: normal;
    font-size: 0.9rem;
    color: var(--sai-text-muted);
}

/* ----------------------------------------------------------------------------
   13. Block — Buttons
   ------------------------------------------------------------------------- */
.sai-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--sai-radius-sm);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.15s ease;
    cursor: pointer;
    line-height: 1.2;
}
.sai-btn--primary { background: var(--sai-deep); color: #fff; }
.sai-btn--primary:hover { background: #003a76; color: #fff; text-decoration: none; }
.sai-btn--secondary { background: var(--sai-primary); color: #fff; }
.sai-btn--secondary:hover { background: #2f59cf; color: #fff; text-decoration: none; }
.sai-btn--outline {
    background: transparent;
    color: var(--sai-deep);
    border-color: var(--sai-deep);
}
.sai-btn--outline:hover { background: var(--sai-deep); color: #fff; text-decoration: none; }
.sai-btn--lg { padding: 1rem 2rem; font-size: 1.1rem; }
.sai-btn--block { display: flex; width: 100%; justify-content: center; }

/* ----------------------------------------------------------------------------
   14. Block — Role cards (homepage Patient/Mediziner)
   ------------------------------------------------------------------------- */
.sai-role-cards {
    display: grid;
    gap: clamp(1.25rem, 10vw, 6.5rem);
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
}
@media (min-width: 768px) {
    .sai-role-cards {
        grid-template-columns: repeat(2, minmax(0, 25rem));
        justify-content: center;
    }
}

.sai-role-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 25rem;
    min-height: 10.8125rem; /* ~173px Figma */
    border-radius: var(--sai-radius-lg);
    border: none;
    box-shadow: var(--sai-shadow-role);
    color: var(--sai-primary);
    font-size: 1.5625rem;
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    padding: 1.5rem;
    text-align: center;
}
/* Figma: patient card uses exported frame background (SVG under /images/symptomai/) */
.sai-role-card:not(.sai-role-card--blue) {
    background-color: #fff;
    background-image: url('../../../images/symptomai/home-card-patient-bg.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.sai-role-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    text-decoration: none;
    color: var(--sai-primary);
}
.sai-role-card--blue {
    background: var(--sai-bg-card-blue);
    background-image: none;
}

/* Patient:innen — SYMPTOM-AI goals band (Figma ~1:88–1:97) */
.sai-symptomai-goals__panel {
    background: var(--sai-bg-card-blue);
    border-radius: 35px;
    padding: clamp(2rem, 5vw, 3.5rem);
    box-shadow: var(--sai-shadow-role);
}
.sai-symptomai-goals__title {
    color: #155899;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 1rem;
}
.sai-symptomai-goals__intro {
    color: #003063;
    font-size: 1.625rem;
    font-weight: 500;
    line-height: 1.35;
    max-width: 62rem;
    margin: 0 auto 2rem;
}
.sai-symptomai-goals__cards {
    gap: clamp(1rem, 3vw, 1.5rem);
}
.sai-symptomai-goals__card {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 25px;
    box-shadow: var(--sai-shadow-role);
    padding: 1.5rem 1.25rem;
    min-height: 7.5rem;
    text-align: center;
}
.sai-symptomai-goals__card p {
    color: var(--sai-text-muted);
    font-size: 1.625rem;
    line-height: 1.35;
    font-weight: 400;
    margin: 0;
}
@media (min-width: 768px) {
    .sai-grid--3 > .sai-symptomai-goals__card {
        height: 100%;
        box-sizing: border-box;
    }
}
.sai-symptomai-goals__footnote {
    color: #003063;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.45;
    margin: 1.75rem 0 0;
}

/* Patient:innen — „Allgemeiner Ablauf“ Abschlussblock (Figma ~1:116–1:118) */
.sai-patient-flow-panel {
    background: rgba(90, 138, 181, 0.6);
    border-radius: 35px;
    padding: clamp(1.75rem, 4vw, 2.75rem);
}
.sai-patient-flow-panel__title {
    color: var(--sai-text);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 1.25rem;
}
.sai-patient-flow-panel__list {
    color: #003063;
    font-size: 1.5rem;
    line-height: 1.45;
    padding-left: 1.35rem;
    margin: 0;
}
.sai-patient-flow-panel__list li { margin-bottom: 0.35rem; }
.sai-patient-flow-panel__list li:last-child { margin-bottom: 0; }

/* Right-aligned card variant — Figma patient:innen page alternating layout.
   Sections alternate left/right to create visual rhythm. On mobile all cards
   revert to standard left-aligned. */
.sai-card--right {
    text-align: right;
    margin-left: clamp(0rem, 14%, 11rem);
}
.sai-card--right .sai-card__title { text-align: right; }
.sai-card--right ul,
.sai-card--right ol {
    padding-left: 0;
    padding-right: 1.25rem;
    list-style-position: inside;
}
.sai-section-title--right { text-align: right; }
@media (max-width: 767.98px) {
    .sai-card--right {
        margin-left: 0;
        text-align: left;
    }
    .sai-card--right .sai-card__title { text-align: left; }
    .sai-card--right ul,
    .sai-card--right ol {
        padding-left: 1.25rem;
        padding-right: 0;
        list-style-position: outside;
    }
    .sai-section-title--right { text-align: left; }
}

/* ----------------------------------------------------------------------------
   15. Block — Team member card
   ------------------------------------------------------------------------- */
.sai-team-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    background: #fff;
    border: 1px solid var(--sai-border);
    border-radius: var(--sai-radius);
    padding: 1.5rem;
}
@media (min-width: 768px) {
    .sai-team-card { grid-template-columns: minmax(0, 1fr) 240px; }
}
.sai-team-card__title { color: var(--sai-deep); margin: 0 0 0.5rem; }
.sai-team-card__photo {
    width: 100%; aspect-ratio: 3/4; object-fit: cover;
    border-radius: var(--sai-radius);
    background: var(--sai-bg-grey);
}

/* ----------------------------------------------------------------------------
   16. Block — Anchor navigation (left rail)
   ------------------------------------------------------------------------- */
.sai-anchor-nav {
    position: sticky; top: 96px;
    list-style: none; padding: 0; margin: 0;
    border-left: 2px solid var(--sai-border);
}
.sai-anchor-nav li { margin: 0; }
.sai-anchor-nav a {
    display: block;
    padding: 0.4rem 0.75rem;
    color: var(--sai-text-muted);
    font-size: 0.9rem;
    border-left: 2px solid transparent;
    margin-left: -2px;
    text-decoration: none;
}
.sai-anchor-nav a:hover { color: var(--sai-primary); }
.sai-anchor-nav a.is-active {
    color: var(--sai-deep);
    border-left-color: var(--sai-primary);
    font-weight: 600;
}

/* ----------------------------------------------------------------------------
   17. Block — References list
   ------------------------------------------------------------------------- */
.sai-references {
    background: #fff;
    border: 1px solid var(--sai-border);
    border-radius: var(--sai-radius);
    padding: 1.5rem;
    font-size: 0.9rem;
    color: var(--sai-text-muted);
}
.sai-references__title { color: var(--sai-deep); margin: 0 0 0.75rem; }
.sai-references ol { padding-left: 1.25rem; margin-bottom: 0; }
.sai-references li { margin-bottom: 0.6rem; line-height: 1.5; }
.sai-references a { word-break: break-word; }

/* ----------------------------------------------------------------------------
   18. Block — Funding logos band
   ------------------------------------------------------------------------- */
.sai-funding {
    background: #fff;
    border-block: 1px solid var(--sai-border);
    padding-block: 1.25rem;
}
.sai-funding__inner {
    display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
    justify-content: space-between;
}
.sai-funding__caption { color: var(--sai-text-muted); font-size: 0.9rem; margin: 0; }
.sai-funding__logos { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.sai-funding__logos img { max-height: 56px; width: auto; }

/* ----------------------------------------------------------------------------
   19. Footer (template chrome)
   ------------------------------------------------------------------------- */
/* Figma: white page chrome below funding strip (not dark slate) */
.sai-footer {
    background: var(--sai-bg);
    color: var(--sai-text-muted);
    border-top: 1px solid var(--sai-border);
}
.sai-footer a { color: var(--sai-primary); }
.sai-footer a:hover { color: var(--sai-deep); }
.sai-footer__cols { padding-block: clamp(2rem, 4vw, 3.5rem); }
.sai-footer__cols h1,
.sai-footer__cols h2,
.sai-footer__cols h3,
.sai-footer__cols h4,
.sai-footer__cols h5,
.sai-footer__cols h6 {
    color: var(--sai-deep);
}
.sai-footer__bottom {
    padding-block: 1rem;
    border-top: 1px solid var(--sai-border);
    font-size: 0.875rem;
    color: var(--sai-text-muted);
}

/* ----------------------------------------------------------------------------
   20. Joomla com_content overrides (single article wrapper)
   ------------------------------------------------------------------------- */
/* Article sections carry their own padding-block via .sai-section — no extra wrapper padding needed. */
.sai-article { padding-block: 0; }
.sai-article__header { margin-bottom: 1.5rem; }
.sai-article__title { color: var(--sai-deep); }
.sai-article__body {
    min-width: 0;
    /* visible: overflow-x: clip was clipping shadows / rounded corners on some pages */
    overflow-x: visible;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}
/* .row under .sai-article__body is NOT a direct child of Bootstrap's .container
   (see index.php). Negative margins then extend past the padded column → horizontal
   scroll on small viewports. */
.sai-article__body > .row {
    margin-left: 0;
    margin-right: 0;
}
/* Editor blocks often use .col-lg-* / .col-md-* without .col-12. Below that
   breakpoint Bootstrap does not set width, so flex items can stay narrow. */
@media (max-width: 991.98px) {
    .sai-article__body .row > [class*="col-lg-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
@media (max-width: 767.98px) {
    .sai-article__body .row > [class*="col-md-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
.sai-article__body .row > [class*="col-"] {
    min-width: 0;
}
/* Hash / in-page links: offset below sticky header (aligns with .sai-anchor-nav top: 96px) */
.sai-article__body [id] {
    scroll-margin-top: 6rem;
}
.sai-mobile-toc details {
    border-color: var(--sai-border) !important;
}
.sai-mobile-toc summary {
    cursor: pointer;
    color: var(--sai-deep);
}
.sai-mobile-toc a {
    display: inline-block;
    padding: 0.15rem 0;
    color: var(--sai-text-muted);
    text-decoration: none;
}
.sai-mobile-toc a:hover { color: var(--sai-primary); }
.sai-article__body > :first-child { margin-top: 0; }
.sai-article__body img { max-width: 100%; height: auto; border-radius: var(--sai-radius); }
.sai-article__body h2 { margin-top: 2rem; }
.sai-article__body h3 { margin-top: 1.5rem; }
/* Headings inside design-system cards: no extra top margin, no inherited hyphenation jank */
.sai-article__body .sai-card > :is(h1, h2, h3, h4, h5, h6):first-child,
.sai-article__body .sai-card > .sai-card__title:first-child {
    margin-top: 0;
}
.sai-article__body .sai-card :is(h1, h2, h3, h4, h5, h6) {
    hyphens: none;
    -webkit-hyphens: none;
}

/* ----------------------------------------------------------------------------
   21. Error / Offline pages
   ------------------------------------------------------------------------- */
.sai-error { padding-block: 4rem; }
.sai-error__code { color: var(--sai-primary); line-height: 1; }

/* ----------------------------------------------------------------------------
   22. Print
   ------------------------------------------------------------------------- */
@media print {
    .sai-header, .sai-footer, .sai-anchor-nav, .sai-mobile-toc { display: none !important; }
    .sai-card, .sai-disclaimer { box-shadow: none; border-color: #ccc; }
}