/* dedc: Bildserie 0.1.2. */
body.particles-studio {
    --studio-accent: #173b60;
}

body.particles-studio .studio-home #leistungen .studio-services {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

body.particles-studio .studio-home #leistungen .studio-service--illustrated {
    grid-template-columns: minmax(0, 1fr) 44px;
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 0 12px;
    min-height: 0;
    padding: 0;
    border: 1px solid #dedede;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 3px 12px rgb(36 39 43 / 4%);
}

body.particles-studio .studio-home #leistungen .studio-service__image {
    display: block;
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 5px 5px 0 0;
    background: #f4f4f4;
}

body.particles-studio .studio-home #leistungen .studio-service--illustrated > .studio-service__copy {
    grid-column: 1;
    grid-row: 2;
    padding: 20px 0 24px 20px;
}

body.particles-studio .studio-home #leistungen .studio-service--illustrated h3 {
    margin-bottom: 8px;
    font-size: 22px;
}

body.particles-studio .studio-home #leistungen .studio-service--illustrated :is(h3, p) {
    overflow-wrap: normal;
    hyphens: auto;
}

body.particles-studio .studio-home #leistungen .studio-service--illustrated > .studio-service__arrow {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: 25px 24px 0 0;
}

body.particles-studio .studio-home #leistungen .studio-service--illustrated:is(:hover, :focus-visible) {
    border-color: #173b60;
}

/* Das Basistheme setzt den Linkfokus mit !important zurück. */
body.particles-studio .studio-home #leistungen .studio-service--illustrated:focus-visible {
    outline: 3px solid #173b60 !important;
    outline-offset: 4px;
}

@media (min-width: 640px) and (max-width: 959px) {
    body.particles-studio .studio-home #leistungen .studio-services {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 639px) {
    body.particles-studio .studio-home #leistungen .studio-services {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Die Einstiegsbilder bleiben vollständig sichtbar. */
body.particles-studio .studio-home .studio-hero {
    background: #f4f4f4;
}

body.particles-studio .studio-home .studio-hero__image {
    object-fit: contain;
    object-position: right center;
}

body.particles-studio .studio-home .studio-hero::after {
    display: none;
}

body.particles-studio .studio-home .studio-insight__image {
    aspect-ratio: 3 / 2;
    object-fit: contain;
}

@media (max-width: 767px) {
    body.particles-studio .studio-home .studio-hero {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 16px;
        min-height: 0;
        padding-block: 32px 0;
    }

    body.particles-studio .studio-home .studio-hero__image {
        position: static;
        inset: auto;
        z-index: auto;
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
    }

    body.particles-studio .studio-home .studio-hero__copy {
        max-width: none;
    }
}

/* Layout 0.2.0: kompakte Motive im Maß der Beitragsbilder. */
body.particles-studio { --site-thumb-width: 120px; --site-thumb-height: 120px; }
body.particles-studio .studio-home #leistungen :is(.studio-service--illustrated, .ctg-topic-tile) {
    grid-template-columns: var(--site-thumb-width) minmax(0, 1fr) 20px;
    grid-template-rows: auto;
    align-items: center;
    gap: 18px;
    padding: 24px 0;
    min-height: 0;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
body.particles-studio .studio-home #leistungen :is(.studio-service__image, .ctg-topic-tile__image) {
    grid-column: 1;
    grid-row: 1;
    width: var(--site-thumb-width);
    height: var(--site-thumb-height);
    aspect-ratio: auto;
    object-fit: contain;
    border-radius: 0;
    background: #f4f4f4;
}
body.particles-studio .studio-home #leistungen :is(.studio-service--illustrated, .ctg-topic-tile) > .studio-service__copy {
    grid-column: 2;
    grid-row: 1;
    padding: 0;
    min-width: 0;
}
body.particles-studio .studio-home #leistungen :is(.studio-service--illustrated, .ctg-topic-tile) h3 {
    margin: 0 0 6px;
    font-size: 20px;
    line-height: 1.3;
}
body.particles-studio .studio-home #leistungen :is(.studio-service--illustrated, .ctg-topic-tile) :is(h3, p) {
    overflow-wrap: anywhere;
    hyphens: auto;
}
body.particles-studio .studio-home #leistungen :is(.studio-service--illustrated, .ctg-topic-tile) > .studio-service__arrow {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    margin: 0;
}
body.particles-studio .studio-home #leistungen :is(.studio-service--illustrated, .ctg-topic-tile):focus-visible {
    outline: 3px solid var(--studio-accent, var(--studio-primary)) !important;
    outline-offset: 4px;
}
body.particles-studio .studio-home #beitraege .studio-article {
    grid-template-columns: var(--site-thumb-width) minmax(0, 1fr) 20px;
    gap: 18px;
    align-items: center;
}
body.particles-studio .studio-home #beitraege .studio-article__image {
    width: var(--site-thumb-width);
    height: var(--site-thumb-height);
    aspect-ratio: auto;
    object-fit: contain;
}
body.particles-studio .studio-home .studio-insight__image {
    width: var(--site-thumb-width);
    height: var(--site-thumb-height);
    aspect-ratio: auto;
    object-fit: contain;
}
body.particles-studio .site-detail-image {
    float: right;
    max-width: 36%;
    margin: 0 0 20px 24px;
}
body.particles-studio .site-detail-image img {
    display: block;
    width: auto;
    max-width: 100%;
    height: var(--site-thumb-height);
    object-fit: contain;
}
body.particles-studio .site-detail-image + h1 {
    margin-top: 0;
    overflow-wrap: anywhere;
    hyphens: auto;
}
@media (max-width: 767px) {
    body.particles-studio { --site-thumb-width: 88px; --site-thumb-height: 96px; }
    body.particles-studio .studio-home #leistungen :is(.studio-service--illustrated, .ctg-topic-tile) {
        gap: 14px;
        grid-template-columns: var(--site-thumb-width) minmax(0, 1fr) 18px;
    }
    body.particles-studio .studio-home #beitraege .studio-article {
        grid-template-columns: var(--site-thumb-width) minmax(0, 1fr) 18px;
        gap: 14px;
    }
    body.particles-studio .site-detail-image { margin-left: 18px; }
}

/* Kurze Überschriften bleiben neben dem Bild als ganze Wörter lesbar. */
@media (max-width: 479px) {
    body.particles-studio .site-detail-image { max-width: 30%; margin-left: 16px; }
    body.particles-studio .site-detail-image + h1 {
        font-size: 22px;
        line-height: 1.3;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: auto;
    }
}