/* STUDIO Showcase (partials/components/showcase-page.hbs, js/showcase-page.js).
   Grundlage ist die Leseansicht der Blogartikel (post-reading.css): gleicher Kopf, gleiche Schrift, gleiche Spalte, gleiche Lese-Pille.
   Für den Zweck eines Showcases kommen dazu: Kapitel-Namen als Wegweiser in einer Größe (auch „Worum es geht“, „Steckbrief“,
   „Nächster Schritt“), hellgraue Kachel als Steckbrief, rollende Zahlen wie in „Über mich“, Logo-Reihen und Empfehlungen
   wie auf der Startseite, schwarze Kachel mit weißem Knopf, Showcase-Kacheln zum Weiterlesen.
   Bewegung nur über transform, opacity und clip-path. Bei „Bewegung reduzieren“ oder ohne JavaScript steht alles sofort da. */

.sc-page {
    --sc-line: var(--c-line);
    --sc-card-radius: clamp(14px, 1.2vw, 20px);
    --sc-title-size: clamp(32px, 1.6vw + 18px, 52px);
    color: var(--text-color);
}

.sc-page [hidden] {
    display: none !important;
}

/* ============ Kopf wie im Blogartikel ============ */

/* Das Bild füllt nicht den Bildschirm, sondern ist eine breite Kachel im Seitenverhältnis 2:1 */
.sc-article .sc-hero:has(.post-hero-image) {
    min-height: 0;
    padding-bottom: 0;
}

/* Thema als große Pille in zwei Teilen: links schwarz „Showcase“, rechts hellgrau das Thema */
.sc-topic {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 20px 5px 5px;
    border-radius: 999px;
    background-color: var(--r-tile);
    color: var(--r-text);
    font-size: clamp(16px, 0.4vw + 12px, 19px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.01em;
    font-variant-numeric: normal;
}

.sc-topic-kind {
    display: inline-flex;
    align-items: center;
    height: 2.2em;
    margin-right: .55em;
    padding: 0 .9em;
    border-radius: 999px;
    background-color: var(--r-text);
    color: var(--background-color);
    font-size: .82em;
}

.sc-topic-name {
    padding: .5em 0;
}

/* Ohne Thema im Titel nur der schwarze Teil */
.sc-topic:has(.sc-topic-name[hidden]) {
    padding: 0;
    background: none;
}

.sc-topic:has(.sc-topic-name[hidden]) .sc-topic-kind {
    margin: 0;
}

.sc-article .sc-hero-title {
    max-width: 20ch;
}

.sc-hero-image .post-hero-image-frame {
    flex: none;
    min-height: 0;
    aspect-ratio: 2 / 1;
}

/* Beim Laden öffnet sich das Bild ruhig wie das Startbild. Beim Scrollen gleitet es leicht im Rahmen */
@media (prefers-reduced-motion: no-preference) {
    .sc-hero-image .post-hero-image-frame {
        animation: sc-open 1.4s var(--ease-transition) .15s both;
    }

    .sc-hero-image .post-hero-image-frame img {
        animation: sc-zoom 2s var(--ease-transition) .15s both;
    }

    @supports (animation-timeline: view()) {
        .sc-hero-image .post-hero-image-frame img {
            inset: -6% 0;
            height: 112%;
            animation: sc-drift linear both;
            animation-timeline: view();
            animation-range: cover 0% cover 100%;
        }
    }
}

@keyframes sc-open {
    from { clip-path: inset(4% 4% 4% 4% round var(--r-radius-big)); }
    to { clip-path: inset(0 0 0 0 round var(--r-radius-big)); }
}

@keyframes sc-zoom {
    from { transform: scale(1.1); }
    to { transform: none; }
}

@keyframes sc-drift {
    from { transform: translateY(-5%); }
    to { transform: translateY(5%); }
}


/* ============ Wegweiser: Kapitel-Namen ============ */

/* Schrift wie die Zwischenüberschrift H2 im Blogartikel (post-reading.css): kleine graue Nummer darüber, Name groß.
   Dazu eine feine Linie über die Spalte. Der große Abstand davor aus post-reading.css bleibt: So sieht man,
   wo ein Abschnitt aufhört und der nächste beginnt. „Worum es geht“, „Steckbrief“ und „Nächster Schritt“ sehen gleich aus */
.sc-label,
.sc-article .post-content-inner > h2.sc-chapter {
    padding-top: calc(var(--r-size) * 1.6);
    border-top: 1px solid var(--r-line);
}

.sc-label {
    margin: 0;
    color: var(--r-text);
    font-family: var(--font1);
    font-size: clamp(28px, calc(var(--r-size) * 1.3) + 0.7vw, 38px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.032em;
}

.sc-article .post-content-inner > h2.sc-chapter + * {
    margin-top: var(--r-after-h2);
}

/* ============ Worum es geht und Steckbrief ============ */

/* Gleiches Raster wie der Text: Spalte in der Mitte, breite Teile bis 1080px */
.sc-intro {
    display: grid;
    grid-template-columns:
        [full-start] minmax(var(--r-gutter), 1fr)
        [wide-start] minmax(0, calc((var(--r-wide) - var(--r-measure)) / 2))
        [content-start] min(var(--r-measure), 100% - 2 * var(--r-gutter))
        [content-end] minmax(0, calc((var(--r-wide) - var(--r-measure)) / 2))
        [wide-end] minmax(var(--r-gutter), 1fr) [full-end];
    row-gap: var(--r-gap-h2);
    margin-top: max(96px, 7.6vw);
}

.sc-block {
    grid-column: content;
    min-width: 0;
}

.sc-block > .sc-label + * {
    margin-top: var(--r-after-h2);
}

/* Einstieg: groß wie eine Aussage, der Rest grau darunter */
.sc-lead > p {
    margin: 0;
}

.sc-lead-text {
    font-family: var(--font1);
    font-size: clamp(23px, 1.4vw + 10px, 30px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -.025em;
    text-wrap: pretty;
}

.sc-lead > p + p {
    margin-top: calc(var(--r-size) * 1.2);
}

.sc-lead-more {
    color: var(--r-muted);
    font-family: var(--font2);
    font-size: clamp(19px, 0.5vw + 15px, 24px);
    line-height: 1.5;
    letter-spacing: -.015em;
    text-wrap: pretty;
}

.sc-lead a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}

/* Steckbrief: breiter als der Text, hellgraue Kachel, Felder wie ein Datenblatt */
.sc-facts-block {
    grid-column: wide;
}

.sc-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.sc-fact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: max(20px, 1.8vw) max(22px, 2vw);
    border-radius: var(--sc-card-radius);
    background-color: var(--r-tile);
}

.sc-fact dt {
    margin: 0;
    color: var(--r-muted);
    font-family: var(--font2);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
}

.sc-fact dd {
    margin: 0;
    color: var(--r-text);
    font-family: var(--font1);
    font-size: clamp(19px, 0.5vw + 14px, 23px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.02em;
    text-wrap: pretty;
}

.sc-fact dd a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--text-color) 30%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    transition: text-decoration-color .2s ease;
}

.sc-fact dd a:hover {
    text-decoration-color: currentColor;
}

/* Sehr lange Angaben über die ganze Breite. Sind alle kurz, stehen sie nebeneinander wie in einem Firmenprofil */
.sc-fact.is-wide {
    grid-column: 1 / -1;
}

@media (min-width: 1081px) {
    .sc-facts.is-compact {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}


/* ============ Text ============ */

.sc-article .post-content-inner-wrapper {
    margin-top: var(--r-gap-h2);
}

.sc-article:has(.sc-intro[hidden]) .post-content-inner-wrapper {
    margin-top: max(96px, 7.6vw);
}


/* ============ Ergebnis in Zahlen (Bausteine aus about-intro.css, Zählwerk aus about-intro.js) ============ */

.sc-article .post-content-inner > .sc-stats {
    grid-column: wide;
    z-index: auto;
    overflow: visible;
    background: none;
}

.sc-article .sc-stats .about-stats {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    max-width: none;
    margin: 0;
}

.sc-article .sc-stats .about-stat {
    min-height: clamp(150px, 13vw, 210px);
    padding: max(18px, 1.5vw);
    border-radius: var(--sc-card-radius);
}

.sc-article .sc-stats .about-stat::before {
    content: none;
}

.sc-article .sc-stats .about-stat + .about-stat {
    margin-top: 0;
}

.sc-article .sc-stats .about-stat-value {
    font-family: var(--font1);
    font-size: clamp(38px, 3.4vw, 60px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.04em;
}

.sc-article .sc-stats .about-stat-label {
    color: var(--r-text);
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -.005em;
    opacity: .7;
}


/* ============ Ergebnis- und Takeaway-Karten ============ */

.sc-article .post-content-inner > .sc-cards {
    grid-column: wide;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.sc-article .post-content-inner > .sc-stats + .sc-cards {
    margin-top: 10px;
}

.sc-article .post-content-inner .sc-cards > li {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: max(20px, 1.8vw) max(22px, 2vw);
    border-radius: var(--sc-card-radius);
    background-color: var(--r-tile);
    font-size: .92em;
    line-height: 1.5;
}

/* Ohne Punkt. Nummerierte Listen behalten die graue Nummer, über dem Titel */
.sc-article .post-content-inner ul.sc-cards > li::before {
    content: none;
}

.sc-article .post-content-inner ol.sc-cards > li::before {
    position: static;
    line-height: 1;
}

.sc-article .post-content-inner .sc-cards > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.sc-article .post-content-inner .sc-card-title {
    display: block;
    font-family: var(--font1);
    font-size: 1.12em;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.02em;
    text-wrap: balance;
}


/* ============ Logo-Reihen im Text (logo-wall.css), Absätze „[AI-First]“ und „[Bekannt aus]“ ============ */

.sc-article .post-content-inner > .sc-insert {
    grid-column: wide;
    margin-top: var(--r-gap-h3);
}

.sc-article .post-content-inner > .sc-insert + :not(h2) {
    margin-top: var(--r-gap-h3);
}

.sc-insert .about-logos {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Fester Platz unter dem Steckbrief: so breit wie der Steckbrief */
.sc-intro > .sc-insert {
    grid-column: wide;
    min-width: 0;
}

/* Fester Platz über den Empfehlungen: wie auf der Startseite */
.sc-page > .sc-insert {
    margin-top: max(104px, 8.4vw);
}

.sc-page > .sc-insert .about-logos {
    max-width: calc(var(--about-max) + 2 * var(--about-gutter));
    margin-inline: auto;
    padding-inline: var(--about-gutter);
}

.sc-page > .sc-insert + .tm-section {
    margin-top: max(88px, 7vw);
}

/* post-reading.css gibt Listen im Text Punkte und Einzug, Absätzen die Textgröße */
.sc-article .post-content-inner .sc-insert li {
    margin: 0;
    padding: 0;
}

.sc-article .post-content-inner .sc-insert li::before {
    content: none;
}

.sc-article .post-content-inner .sc-insert .about-logos-title {
    font-family: var(--font2);
    font-size: 1rem;
    line-height: 130%;
}


/* ============ Nächster Schritt: schwarze Kachel ============ */

.sc-article .sc-end {
    max-width: calc(var(--r-wide) + 2 * var(--r-gutter));
    margin: 0 auto;
    padding: var(--r-gap-h2) var(--r-gutter) 0;
}

.sc-cta {
    display: flex;
    flex-direction: column;
    gap: max(28px, 2.4vw);
    padding: max(40px, 5vw) max(26px, 4.4vw);
    border-radius: var(--r-radius-big);
    background-color: var(--r-text);
    color: var(--background-color);
}

.sc-cta .sc-cta-kicker {
    padding-top: 0;
    border-top: 0;
    color: var(--background-color);
}

.sc-cta-title {
    max-width: 22ch;
    margin: 0;
    color: var(--background-color);
    font-family: var(--font1);
    font-size: var(--sc-title-size);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -.04em;
    text-wrap: balance;
}

.sc-cta-text {
    max-width: 46ch;
    margin: max(18px, 1.4vw) 0 0;
    color: color-mix(in srgb, var(--c-on-ink) 72%, transparent);
    font-family: var(--font2);
    font-size: clamp(17px, .3vw + 15px, 20px);
    line-height: 1.5;
    text-wrap: pretty;
}

.sc-cta-text + .sc-cta-text {
    margin-top: .7em;
}

.sc-cta-text a {
    color: var(--background-color);
    text-decoration: underline;
    text-underline-offset: .18em;
}

/* Weißer Knopf mit schwarzem Pfeilkreis wie in der Navigation */
.sc-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    max-width: 100%;
    min-height: 64px;
    padding: 8px 8px 8px 28px;
    border-radius: 999px;
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: var(--font2);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.01em;
    text-decoration: none;
}

.sc-cta-button:focus-visible {
    outline: 2px solid var(--background-color);
    outline-offset: 3px;
}

.sc-cta-button-arrow {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--text-color);
    color: var(--background-color);
}

.sc-cta-button-arrow svg {
    width: 22px;
    height: 22px;
    transition: transform .5s var(--ease-transition);
}

@media (hover: hover) {
    .sc-cta-button:hover .sc-cta-button-arrow svg {
        transform: translateX(3px);
    }
}


/* ============ Empfehlungen und weitere Showcases ============ */

/* Abstände wie auf der Startseite, ohne den Innenabstand von „Über mich“ */
.sc-page .tm-section {
    margin-top: max(104px, 8.4vw);
}

/* post-content.css macht jedes Zitat groß, kursiv und mit Strich. Die Empfehlungen bleiben wie auf der Startseite */
.sc-page .tm-quote {
    padding-left: 0;
    border-left: 0 !important;
    margin: 0 !important;
    font-size: 1rem !important;
    font-weight: 400;
    font-style: normal;
    text-transform: none;
}

.sc-more {
    padding: max(88px, 7vw) 0 max(120px, 9vw);
}

.sc-page .tm-section:not([hidden]) + .sc-more {
    padding-top: max(40px, 3vw);
}


/* ============ Einblenden beim Scrollen (js/showcase-page.js, nie bei „Bewegung reduzieren“) ============ */

.sc-reveal {
    transition: opacity 1s var(--ease-transition), transform 1s var(--ease-transition);
    transition-delay: var(--sc-delay, 0s);
}

.sc-reveal:not(.is-visible) {
    opacity: 0;
    transform: translateY(24px);
}


/* ============ Handy ============ */

@media (max-width: 767px) {
    .sc-page {
        --sc-title-size: clamp(29px, 7.8vw, 34px);
    }

    .sc-hero-image .post-hero-image-frame {
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    .sc-facts {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .sc-fact {
        padding: 18px 20px;
        gap: 8px;
    }

    .sc-article .post-content-inner > .sc-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .sc-article .sc-stats .about-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .sc-article .sc-stats .about-stat {
        min-height: 140px;
        padding: 16px;
    }

    .sc-article .sc-stats .about-stat-value {
        font-size: clamp(32px, 9vw, 40px);
    }

    .sc-article .sc-stats .about-stat-label {
        font-size: 14px;
    }

    .sc-article .sc-end {
        padding-inline: 10px;
    }

    .sc-cta {
        padding: 36px 22px 22px;
        border-radius: 28px;
    }

    .sc-cta-button {
        width: 100%;
        justify-content: space-between;
        padding-left: 22px;
        font-size: 16px;
    }
}