/*
 * Anpassungen an das Markup von T3Bootstrap 14.
 *
 * T3Bootstrap 14 setzt an jedem Rahmen d-*-flex (Sichtbarkeit je Breakpoint). Das Canvas-CSS dieser Site
 * ist für Rahmen als Block-Elemente gebaut: Als Flex-Container schrumpfen Rahmen auf Inhaltsbreite, und die
 * Außenabstände der Kind-Elemente verschmelzen nicht mehr mit dem Rahmen-Abstand (Margin-Collapsing).
 * Sichtbare Rahmen werden daher wieder Block-Elemente; d-*-none zum Ausblenden je Breakpoint wirkt weiterhin.
 * Dasselbe gilt für die Spalten in Bild-/Text-Galerien (in ws_t3bootstrap 10: d-*-block): Als Flex-Item
 * umschließt die figure den gefloateten Copyright-Hinweis und wird höher.
 */
.frame.d-flex,
.ce-content [class*="col-"].d-flex {
    display: block !important;
}

@media (min-width: 576px) {
    .frame.d-sm-flex,
    .ce-content [class*="col-"].d-sm-flex {
        display: block !important;
    }
}

@media (min-width: 768px) {
    .frame.d-md-flex,
    .ce-content [class*="col-"].d-md-flex {
        display: block !important;
    }
}

@media (min-width: 992px) {
    .frame.d-lg-flex,
    .ce-content [class*="col-"].d-lg-flex {
        display: block !important;
    }
}

@media (min-width: 1200px) {
    .frame.d-xl-flex,
    .ce-content [class*="col-"].d-xl-flex {
        display: block !important;
    }
}

@media (min-width: 1400px) {
    .frame.d-xxl-flex,
    .ce-content [class*="col-"].d-xxl-flex {
        display: block !important;
    }
}

/*
 * Rahmen "Eingerückt" (frame_class indent): Canvas setzt .indent { padding: 10px }.
 * Die Abstands-Utilities t3b-pl-none/t3b-pr-none von T3Bootstrap 14 würden den seitlichen Einzug aufheben.
 */
.frame.indent {
    padding-left: 10px;
    padding-right: 10px;
}

/*
 * Karten im Karten-Container (t3bs_cards): In ws_t3bootstrap 10 lagen sie in Bootstraps 4 .card-deck und hatten dort
 * keinen sichtbaren Abstand unten. Einzelne Karten (z. B. 404) behalten t3b-mb-*.
 */
.frame-type-t3bs_cards .frame.card {
    margin-bottom: 0;
}

/*
 * Videos: T3Bootstrap 14 umschließt sie mit Bootstraps 5 .ratio, das Bootstrap-4-CSS dieser Site kennt nur .embed-responsive.
 * Ohne diese Regeln erscheint das Video in Originalgröße (IQ-Technologie: 2400 × 1350 px).
 */
.ratio {
    position: relative;
    width: 100%;
}

.ratio::before {
    display: block;
    padding-top: var(--bs-aspect-ratio);
    content: "";
}

.ratio > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ratio-1x1 { --bs-aspect-ratio: 100%; }
.ratio-4x3 { --bs-aspect-ratio: 75%; }
.ratio-16x9 { --bs-aspect-ratio: 56.25%; }
.ratio-21x9 { --bs-aspect-ratio: 42.857143%; }

/*
 * Formulare (wapplersystems/form, horizontales Layout) wie zuvor bei Powermail:
 * - Bootstrap 4 .col-form-label vergrößert die Labels (font-size: inherit, Innenabstand) → Canvas-Label-Stil
 * - Button stand bei Powermail im fieldset unter der Feldspalte (offset-sm-3) → kein fieldset-Abstand, gleiche Einrückung
 */
.form-element > label.col-form-label {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.5;
}

fieldset.form-page {
    margin-bottom: 0;
}

fieldset.form-page + .actions {
    /* Innen- statt Außenabstand: bei Powermail lag der Abstand im fieldset und verschmolz nicht mit dem Formularabstand */
    padding-bottom: 1rem;
}

@media (min-width: 576px) {
    fieldset.form-page + .actions {
        margin-left: calc((100% + 30px) * 0.25);
    }
}