/* Content Block "Seitenkopf / Hero". Tokens: base.css */
.frame.frame-type-srwebsites_pageintro {
    --frame-color: var(--color-on-primary);
    --frame-background: linear-gradient(135deg, var(--color-navy), var(--color-primary-dark));
    padding-top: clamp(3.5rem, 9vw, 6rem);
    padding-bottom: clamp(3rem, 7vw, 4.75rem);
}

/* Unterseitenkopf: schmale, zentrierte Textspalte wie in der Vorlage */
.frame-type-srwebsites_pageintro:not(:has(.kb-intro--hero)) .frame-container-default {
    max-width: 45rem;
}

.kb-intro__breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1.375rem;
    padding: 0;
    list-style: none;
    font-size: .84375rem;
    font-weight: 600;
}

/* Weiß für Text und Links; BP färbt Links über --frame-link-color (.frame a:not([class])) */
.kb-intro__breadcrumb {
    --frame-link-color: var(--color-on-primary);
    --frame-link-hover-color: var(--color-on-primary);
    color: var(--color-on-primary);
}

.kb-intro__breadcrumb li + li::before {
    content: "/";
    margin-inline-end: .5rem;
}

/* Links weiß wie die aktuelle Seite, daher per Unterstreichung als Link erkennbar */
.kb-intro__breadcrumb a {
    text-decoration: underline;
    text-underline-offset: .2em;
}

.kb-intro__breadcrumb a:hover {
    text-decoration-thickness: 2px;
}

.kb-intro__title {
    margin: 0;
    color: inherit;
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    font-weight: 900;
    line-height: 1.15;
    text-wrap: balance;
}

.kb-intro__lead {
    max-width: 62ch;
    margin-top: 1.125rem;
    color: var(--color-on-dark-lead);
    font-size: 1.09375rem;
    line-height: 1.65;
}

.kb-intro__lead > :last-child {
    margin-bottom: 0;
}

.kb-intro__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 1.875rem;
}

/* Startseiten-Hero: Bild füllt den Rahmen, Text links */
.frame.frame-type-srwebsites_pageintro:has(.kb-intro--hero) {
    --frame-background: var(--color-navy);
    isolation: isolate;
    overflow: hidden;
    padding-top: clamp(6rem, 16vw, 11rem);
    padding-bottom: clamp(4.5rem, 10vw, 7rem);
}

.frame-type-srwebsites_pageintro:has(.kb-intro--hero) :is(.frame-group-container, .frame-group-inner, .frame-container, .frame-inner) {
    position: static;
}

.kb-intro__visual {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.kb-intro__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kb-intro__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgb(6 16 38 / 32%), rgb(6 16 38 / 78%)),
        linear-gradient(100deg, rgb(6 16 38 / 86%), rgb(6 16 38 / 40%) 55%, rgb(6 16 38 / 18%));
}

.kb-intro--hero .kb-intro__content {
    position: relative;
    max-width: 38.75rem;
}

.kb-intro--hero .kb-intro__title {
    font-size: clamp(2.125rem, 4.6vw, 3.25rem);
    text-shadow: 0 2px 18px rgb(0 0 0 / 22%);
}

.kb-intro--hero .kb-intro__lead {
    max-width: 46ch;
    margin-top: 1.25rem;
    color: var(--color-on-dark-lead);
    font-size: 1.125rem;
}

.kb-intro--hero .kb-intro__actions {
    margin-top: 2rem;
}

/* Abstand: Der Seitenkopf hat einen eigenen Hintergrund, ist für BP aber frame-background-none.
   BP (_frame.scss, make-frame-collapsible) würde den folgenden "none"-Abschnitt daher heranziehen.
   #page-content hebt die Spezifität über die BP-Regel. */
#page-content .frame-type-srwebsites_pageintro + .frame {
    --frame-outer-spacing-before: 0;
}