/* EEC: 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;
    }
}

/* Die Einblicke verwenden dieselbe kompakte Anordnung. */
body.particles-studio .studio-home .studio-insight {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
}
body.particles-studio .studio-home .studio-insight__image {
    flex: 0 0 var(--site-thumb-width);
    margin: 0;
}
body.particles-studio .studio-home .studio-insight__copy { flex: 1; min-width: 0; }
body.particles-studio .studio-home .studio-insight__copy h3 { font-size: 20px; }
body.particles-studio .studio-home .studio-insight__copy :is(h3, p) { overflow-wrap: anywhere; hyphens: auto; }

/* Proton 0.2.4: Produktmaterialien und Farben der offiziellen Marke. */
body.particles-studio .proton-page {
    --proton-accent: #6d4aff;
    --proton-ink: #1b1340;
    --proton-muted: #555160;
    color: var(--proton-ink);
    font-family: Arial, Helvetica, sans-serif;
}
body.particles-studio .proton-page .proton-wrap { width: min(100%, 1168px); margin-inline: auto; padding-inline: 32px; }
body.particles-studio .proton-page :is(h1, h2, h3) { color: var(--proton-ink) !important; font-family: inherit; font-weight: 700; letter-spacing: -.025em; }
body.particles-studio .proton-page p { color: var(--proton-muted); font-size: 17px; line-height: 1.65; }
body.particles-studio .proton-page .proton-hero { padding-block: 64px; background: #f6f6f6; }
body.particles-studio .proton-page .proton-hero__inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 48px; }
body.particles-studio .proton-page .proton-kicker { margin: 0 0 14px; color: var(--proton-accent); font-size: 14px; font-weight: 700; letter-spacing: .025em; }
body.particles-studio .proton-page h1 { margin: 0 0 20px; font-size: clamp(36px, 5vw, 60px); line-height: 1.05; }
body.particles-studio .proton-page .proton-hero__intro { max-width: 50ch; margin: 0 0 24px; font-size: 18px; }
body.particles-studio .proton-page .proton-hero__image { display: block; width: 100%; height: auto; aspect-ratio: 1372 / 560; object-fit: contain; border-radius: 24px; }
body.particles-studio .proton-page .proton-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; max-width: 100%; padding: 12px 20px; border: 1px solid var(--proton-accent); border-radius: 999px; background: var(--proton-accent); color: #ffffff !important; font-size: 15px; font-weight: 700; line-height: 1.3; text-decoration: none; }
body.particles-studio .proton-page .proton-button:hover { background: #5131c5; border-color: #5131c5; }
body.particles-studio .proton-page a:focus-visible { outline: 3px solid var(--proton-ink) !important; outline-offset: 4px; }
body.particles-studio .proton-page .proton-offers { padding-block: 56px; background: #ffffff; }
body.particles-studio .proton-page h2 { margin: 0 0 16px; font-size: 32px; line-height: 1.2; }
body.particles-studio .proton-page .proton-offers__intro { max-width: 66ch; margin: 0 0 32px; }
body.particles-studio .proton-page .proton-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
body.particles-studio .proton-page .proton-product { display: flex; flex-direction: column; align-items: flex-start; padding: 28px; border: 1px solid #e5e2ed; border-radius: 24px; background: #ffffff; box-shadow: 0 6px 24px rgb(27 19 64 / 4%); }
body.particles-studio .proton-page .proton-product__brand { display: flex; align-items: center; gap: 18px; min-height: 72px; width: 100%; }
body.particles-studio .proton-page .proton-product__logo { display: block; flex: 0 0 64px; width: 64px; height: 64px; object-fit: contain; }
body.particles-studio .proton-page .proton-product--pass .proton-product__logo { flex-basis: 48px; width: 48px; height: 48px; margin: 8px; }
body.particles-studio .proton-page .proton-product__copy { min-width: 0; }
body.particles-studio .proton-page .proton-product h3 { margin: 0 0 6px; font-size: 24px; line-height: 1.2; }
body.particles-studio .proton-page .proton-product__category { margin: 0; font-size: 16px; }
body.particles-studio .proton-page .proton-product .proton-button { margin-top: 24px; }
body.particles-studio .proton-page .proton-about { padding-block: 48px 56px; background: #f6f6f6; }
body.particles-studio .proton-page .proton-about__copy { max-width: 78ch; }
body.particles-studio .proton-page .proton-about__copy p { margin: 0 0 20px; }
body.particles-studio .proton-page .proton-credit { margin: 28px 0 0; font-size: 14px; }
body.particles-studio .proton-page .proton-credit a { color: #5131c5; text-decoration: underline; }
@media (max-width: 959px) {
    body.particles-studio .proton-page .proton-hero__inner { gap: 32px; }
    body.particles-studio .proton-page .proton-hero { padding-block: 48px; }
}
@media (max-width: 767px) {
    body.particles-studio .proton-page .proton-wrap { padding-inline: 20px; }
    body.particles-studio .proton-page .proton-hero { padding-block: 36px; }
    body.particles-studio .proton-page .proton-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    body.particles-studio .proton-page .proton-hero__intro { font-size: 17px; }
    body.particles-studio .proton-page .proton-products { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    body.particles-studio .proton-page .proton-offers { padding-block: 40px; }
    body.particles-studio .proton-page .proton-product { padding: 24px; }
    body.particles-studio .proton-page .proton-product h3 { font-size: 22px; }
    body.particles-studio .proton-page h2 { font-size: 28px; }
    body.particles-studio .proton-page .proton-about { padding-block: 36px 40px; }
}