/* ============================================================
 * Text-Media Section (ContentBlock: text-media-section)
 * Layouts: standard, wide, paper
 * ============================================================ */

.tms { background: var(--bg); border-bottom: 1px solid var(--line); }
.tms--paper { background: var(--paper); color: var(--bg); border-bottom-color: var(--bone); }

/* ---------- STANDARD + PAPER (2-column with sticky left) ---------- */
.tms__grid {
    padding: 96px 32px;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.4fr);
    gap: 72px;
    align-items: start;
}
.tms__sticky { position: sticky; top: 100px; }
.tms__headline-wrap { container-type: inline-size; }
.tms__headline { font-size: clamp(48px, 11cqw, 112px); margin: 12px 0 0; }

.tms__text { font-size: 24px; line-height: 1.35; color: var(--bone); margin: 0 0 24px; text-wrap: pretty; }
.tms--paper .tms__text { color: inherit; }

.tms__media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px;
}
.tms__media-grid--above { margin-bottom: 32px; }
.tms__media-grid--right { margin-top: 32px; }
.tms__img { width: 100%; height: auto; display: block; }

.tms__buttons { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }

.tms__downloads { margin-top: 32px; border-top: 1px solid var(--line); padding-top: 20px; }
.tms--paper .tms__downloads { border-top-color: var(--bone); }
.tms__downloads-label { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); margin-bottom: 12px; }
.tms__download {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 0; border-bottom: 1px solid var(--line);
    color: var(--ink); text-decoration: none; font-size: 14px;
}
.tms--paper .tms__download { border-bottom-color: var(--bone); color: inherit; }
.tms__download-name { flex: 1; }
.tms__download-ext { font-size: 11px; color: var(--mute); }
.tms__download-icon { font-size: 14px; }

/* ---------- WIDE (full width) ---------- */
.tms__wide { padding: 96px 32px; }
.tms__headline--wide { font-size: clamp(56px, 10vw, 128px); margin: 12px 0 0; }
.tms__text--wide { font-size: 24px; line-height: 1.35; color: var(--bone); margin: 40px 0 0; max-width: 900px; text-wrap: pretty; }
.tms__media-grid--wide {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 8px;
    margin-top: 48px;
}
.tms__buttons--wide { display: flex; gap: 12px; margin-top: 40px; flex-wrap: wrap; }
.tms__downloads--wide { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 20px; max-width: 600px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .tms__grid { grid-template-columns: 1fr; gap: 40px; }
    .tms__sticky { position: static; container-type: normal; }
}
@media (max-width: 600px) {
    .tms__grid,
    .tms__wide { padding: 48px 16px; }
}

/* Responsive sweep D: keep sticky media/content fluid on narrow phones. */
@media (max-width: 600px) {
    .tms__grid { grid-template-columns: minmax(0, 1fr) !important; }
    .tms__sticky {
        width: auto !important;
        min-width: 0;
        max-width: 100%;
    }
    .tms__sticky > * {
        min-width: 0;
        max-width: 100%;
    }
    .tms__sticky img,
    .tms__sticky video,
    .tms__sticky iframe {
        max-width: 100%;
        height: auto;
    }
}

/* Responsive sweep E: long wide headlines must wrap below 430px. */
@media (max-width: 429px) {
    .tms__headline,
    .tms__headline--wide {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: normal;
    }
    .tms__headline > span,
    .tms__headline--wide > span {
        overflow-wrap: anywhere;
        word-break: normal;
    }
}

/* Responsive sweep, letzte Klasse: RTE-/Bio-Fliesstext darf lange Tokens
   (Slash-Komposita, URLs, Komposita wie Datenschutzerklaerung) nie ueber
   die Spalte hinausmalen — Text-Node-Overflow ohne Element-Rect. */
.tms__text,
.tms__text--wide {
    overflow-wrap: anywhere;
}