/* =========================================================================
   FLT Telefon-KI – Hilfsklassen (zuletzt geladen, gewinnen bei Gleichstand)
   Sparsam einsetzen; Layout primär über Komponenten und .stack/.cluster.
   ========================================================================= */

/* Abstand zwischen Geschwistern */
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-xs { display: flex; flex-direction: column; gap: 4px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.stack-md { display: flex; flex-direction: column; gap: 12px; }
.stack-lg { display: flex; flex-direction: column; gap: 24px; }
.stack-xl { display: flex; flex-direction: column; gap: 32px; }

.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cluster-sm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.cluster-lg { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.cluster-between { justify-content: space-between; }
.cluster-start { align-items: flex-start; }

.flex-1 { flex: 1 1 0%; min-width: 0; }
.min-w-0 { min-width: 0; }
.ml-auto { margin-left: auto; }
.w-full { width: 100%; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; }

/* Lesbare Maximalbreiten innerhalb voller Breite */
.max-w-form { max-width: var(--form-max); }
.max-w-prose { max-width: var(--prose-max); }
.max-w-sm { max-width: 480px; }

/* Text */
.muted { color: var(--color-text-tertiary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-2xs { font-size: var(--text-2xs); }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.fw-medium { font-weight: var(--weight-medium); }
.fw-semibold { font-weight: var(--weight-semibold); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-danger { color: var(--danger-fg); }
.text-success { color: var(--success-fg); }
.text-warning { color: var(--warning-fg); }
.text-info { color: var(--info-fg); }
.tabular { font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.pre-line { white-space: pre-line; }
.break-anywhere { overflow-wrap: anywhere; }
.truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.prose { max-width: var(--prose-max); line-height: var(--leading-relaxed); color: var(--color-text-secondary); }
.prose > * + * { margin-top: 10px; }

/* Sichtbarkeit nach Breakpoint */
@media (max-width: 767.98px) {
    .hide-mobile { display: none !important; }
}

/* Unter 640 px nur für Screenreader (z. B. Button-Text neben einem Icon) */
@media (max-width: 639.98px) {
    .visually-hidden-sm {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
}

@media (min-width: 768px) {
    .show-mobile { display: none !important; }
}