html {
    scroll-padding-top: calc(var(--nav-height) + var(--space-sm));
}

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background: var(--color-cream);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Inner pages (Über mich, Ordination, Spezialgebiete, …) — same cream
   canvas and centered module width as the landing page's content area. */
.detContainer {
    background: var(--color-cream);
    flex: 1;
}

.detTeaser {
    max-width: var(--container-max);
    margin: var(--space-md) auto 0;
    padding: 0 var(--container-padding);
    font-size: 1rem;
    color: var(--color-maroon-light, var(--color-text));
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.main-container {
    padding: var(--container-padding);
}

/* Rich-text alignment (Select field on the 'text' block) */
.align-left {
    text-align: left;
}

.align-center {
    text-align: center;
}

.align-right {
    text-align: right;
}

/* Collapsable block — native <details>/<summary>, no JS required */
.collapsableBlock {
   
    /* padding: var(--space-sm) 0; */
}

.collapsableTitle {
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 20px;
    color: var(--color-maroon, var(--color-text));
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.collapsableTitle {
    justify-content: flex-start;
}

.collapsableTitle::-webkit-details-marker {
    display: none;
}

.collapsableContent {
    padding-top: var(--space-sm);
    padding-left: 34px;
    line-height: 1.7;
}

.collapsableContent p {
    margin-bottom: 1em;
}

/* Circled-arrow toggle icon, shared by individual collapsable items and
   collapsible_start group headers — matches the design mockup. Rotates to
   point down when its <details> is open. */
.collapseArrowIcon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--color-maroon, var(--color-text));
    transition: transform 0.15s ease;
}

details[open] > summary .collapseArrowIcon {
    transform: rotate(90deg);
}

/* Collapsible group (collapsible_start / collapsible_end) — wraps an entire
   section (e.g. one whole Schwerpunkt: title, image, quote, its own nested
   FAQ items, everything) behind one toggle. Closed by default. */
.module_collapsible_group {
    /* margin: var(--space-md) 0; */
    /* border-top: 1px solid rgba(74, 30, 30, 0.15); */
    /* padding-top: var(--space-sm); */
}

.collapsibleGroupSummary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    list-style: none;
    margin-bottom: var(--space-sm);
}

.collapsibleGroupSummary::-webkit-details-marker {
    display: none;
}

.collapsibleGroupSummary h2 {
    font-family: var(--font-heading);
    font-size: 36px;
    color: var(--color-maroon);
    font-weight: 400;
    margin: 0;
}


.collapsibleGroupSummary h3 {
    font-family: var(--font-heading);
    font-size: 24px;
    color: var(--color-maroon);
    font-weight: 400;
    margin: 0;
}

.collapsibleGroupContent {
    padding-left: 34px;
    /* padding-top: var(--space-sm); */
}

.collapsibleGroupContent > .module:first-child {
    margin-top: 0;
}

.collapsibleGroupContent .collapsableBlock:first-child {
    border-top: none;
}

.module_stoerer {
    /* Breaks out of the constrained content container to span the full
       viewport width, regardless of how deep it sits in the module tree. */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: var(--space-lg) var(--container-padding);
    text-align: center;
    
}

.stoererInner {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

.stoererTextGroup {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    width: 70%;
}

.stoerer__headline {
    font-family: var(--font-heading);
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 400;
}

.module_stoerer--none {
    background: none;
}

.module_stoerer--cream-dark {
    background: var(--color-cream-dark);
}

.module_stoerer--cream-darker {
    background: var(--color-cream-darker);
}

.module_stoerer--maroon-light {
    background: var(--color-maroon-light);
    color: #fff;
}

.module_stoerer--maroon {
    background: var(--color-maroon);
    color: #fff;
}

.stoererCta {
    display: inline-block;
    flex-shrink: 0;
    border: 1px solid var(--color-maroon);
    border-radius: 999px;
    padding: 12px 28px;
    color: var(--color-maroon);
    text-decoration: none;
    font-size: 14px;
    font-family: var(--font-heading);
}

.stoererCta:hover {
    background: var(--color-maroon);
    color: #fff;
}

.module_stoerer--maroon .stoererCta,
.module_stoerer--maroon-light .stoererCta {
    border-color: #fff;
    color: #fff;
}

.module_stoerer--maroon .stoererCta:hover,
.module_stoerer--maroon-light .stoererCta:hover {
    background: #fff;
    color: var(--color-maroon);
}