/* Block: Story-Section */

.myk-story--theme-dark   { background: var(--myk-c-dark);   color: var(--myk-c-light); }
.myk-story--theme-cream  { background: #fdf6e1;             color: var(--myk-c-dark); }

.myk-story-grid {
    display: grid;
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: center;
    grid-template-columns: 1fr 1fr;
}

.myk-story--image-left .myk-story-text  { order: 2; }
.myk-story--image-left .myk-story-media { order: 1; }

@media (max-width: 800px) {
    .myk-story-grid { grid-template-columns: 1fr; }
    .myk-story--image-left .myk-story-text,
    .myk-story--image-left .myk-story-media { order: initial; }
}

/* ─── Text ─── */
.myk-story-text {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.myk-story-kicker {
    align-self: flex-start;
    display: inline-block;
    padding: 0.35em 0.85em;
    background: var(--myk-c-accent);
    color: var(--myk-c-light);
    border-radius: var(--myk-r-pill);
    font-size: var(--myk-fs-meta);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.myk-story-headline {
    margin: 0;
    font-size: var(--myk-fs-h2);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.015em;
    text-wrap: balance;
}
.myk-story-body p {
    margin: 0 0 0.85em;
    font-size: var(--myk-fs-body);
    line-height: 1.65;
    opacity: 0.92;
}
.myk-story-body p:last-child { margin-bottom: 0; }

/* ─── Quote-Akzent ─── */
.myk-story-quote {
    position: relative;
    margin: clamp(0.75rem, 1.5vw, 1.5rem) 0 0;
    padding: clamp(1rem, 2vw, 1.5rem) 0 0 clamp(1.25rem, 2.5vw, 2rem);
    border-left: 3px solid var(--myk-c-accent);
}
.myk-story-quote-mark {
    position: absolute;
    top: -0.3em;
    left: clamp(0.5rem, 1vw, 1rem);
    font-size: clamp(2.5rem, 4vw, 4rem);
    font-weight: 900;
    line-height: 1;
    color: var(--myk-c-accent);
    opacity: 0.55;
    font-family: Georgia, "Times New Roman", serif;
}
.myk-story-quote blockquote {
    margin: 0;
    font-size: clamp(1.05rem, 1.7vw, 1.35rem);
    line-height: 1.45;
    font-weight: 500;
    font-style: italic;
    text-wrap: pretty;
}
.myk-story-quote figcaption {
    margin-top: 0.5em;
    font-size: var(--myk-fs-meta);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--myk-c-accent);
}

.myk-story-cta {
    align-self: flex-start;
    margin-top: 0.5rem;
}

/* ─── Bild ─── */
.myk-story-media {
    overflow: hidden;
    border-radius: var(--myk-r-medium);
    aspect-ratio: 4 / 5;
    /* Cap, damit Bild nicht ueber den Viewport hinausragt (bei 2-Col-Layout auf
       breiten Screens wuerde 4:5 sonst > 100vh werden). */
    max-height: clamp(420px, 70vh, 640px);
}
.myk-story-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--myk-dur-base) var(--myk-ease);
}
.myk-story-media:hover img { transform: scale(1.03); }