/*
 * CMS-Block-Stile fuer den freien Editor (Issue #171) - Live-Ausgabe auf der
 * public-app (siehe cms/show.blade.php). 1:1-Kopie von
 * apps/internal-app/public/css/cms-blocks.css, das dieselben Klassen fuer
 * die GrapesJS-Canvas-Vorschau laedt (siehe ADR 0006, "zentral in
 * public/css/cms-blocks.css verankert"). Keine gemeinsame Asset-Pipeline
 * zwischen den beiden Apps, daher wie das vendorte Frontend-Theme dupliziert
 * statt verlinkt - bei Aenderungen an Block-Stilen beide Kopien synchron
 * halten.
 */

.cms-text {
    padding: 1.5rem;
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
}
.cms-text h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.cms-text p {
    line-height: 1.7;
    color: #374151;
}
.cms-text--highlight {
    background-color: #f3f4f6;
    border-radius: 0.5rem;
}
.cms-text--highlight h2 {
    color: #13048f;
}

.cms-image {
    padding: 1rem;
    text-align: center;
}
.cms-image img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
}

.cms-button {
    padding: 1rem;
    text-align: center;
}
.cms-button a {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    background-color: #13048f;
    color: #fff;
    border-radius: 0.375rem;
    text-decoration: none;
    font-weight: 600;
}
.cms-button--secondary a {
    background-color: transparent;
    color: #13048f;
    border: 1px solid #13048f;
}

.cms-columns-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
}
.cms-columns-2 .cms-col h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.cms-columns-2 .cms-col p {
    color: #374151;
    line-height: 1.6;
}

.cms-divider {
    padding: 0.5rem 1.5rem;
}
.cms-divider hr {
    border: none;
    border-top: 1px solid #d1d5db;
}

.cms-accordion,
.cms-tabs {
    margin: 1rem auto;
    max-width: 50rem;
    padding: 0 1.5rem;
}

.cms-icon {
    display: inline-block;
    padding: 0.5rem;
    font-size: 2rem;
    color: #13048f;
}

/*
 * Hero/Zeitstrahl brauchen kein eigenes CSS hier - sie nutzen ausschliesslich
 * reale, bereits vorhandene Klassen (clean-block/clean-hero, list-group/
 * timeline/...), 1:1 aus welcome.blade.php bzw. der echten /geschichte-Seite
 * uebernommen.
 *
 * .clean-card/.info/.icons (Team-Karte) und .sprechblase-card (Interview-
 * Antwort) sind dagegen im vendorten Frontend-Theme (styles.min.css) NICHT
 * enthalten - sie stammen aus dem alten dpbhwebseite-Backend: .clean-card
 * & Co. aus dem <style>-Block der dortigen "Person-Karte"-Editor-Vorlage
 * (templates/pages/backend/cms/editoren/editor_html.html, Funktion
 * addPersoncard()), .sprechblase-card aus einem Inline-<style> auf der
 * echten /vorstand-Seite selbst. Beide 1:1 hier uebernommen, nicht neu
 * gestaltet.
 */
.clean-card {
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.075);
    border-radius: 3px;
    margin-bottom: 40px;
    border: 1px solid #eaeaea;
}
.clean-card .info {
    padding: 30px;
}
.clean-card .icons a {
    font-size: 16px;
    color: #3b99e0;
    opacity: 0.75;
    height: 2em;
    line-height: 2;
    text-align: center;
    padding: 0.6em 0.4em;
    text-decoration: none;
}
.clean-card p {
    opacity: 0.8;
    font-size: 0.85em;
    margin-bottom: 0.9em;
}

.sprechblase-card {
    position: relative;
    border-radius: 0 0.35rem 0.35rem 0.35rem !important;
}
.sprechblase-card::after {
    border: solid transparent;
    content: ' ';
    top: 5px;
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #e3e6f0;
    border-width: 10px;
    margin-left: -20px;
    transform: rotate(270deg);
    transform-origin: center;
}

/*
 * .ql-display (Rich-Text-Ausgabe des Quill-Editors, siehe AppEditor.vue) ist
 * 1:1 aus der alten dpbh.de-Einheitenseite (group-site.html, live geprueft
 * unter dpbh.de/einheiten/{slug}) uebernommen - dort war das ein Inline-
 * <style>-Block direkt im Seiten-Template, nicht im vendorten Bootstrap/
 * Theme-CSS enthalten. Genutzt von
 * apps/internal-app/resources/views/cms/einheiten-page.blade.php.
 *
 * Kein eigenes .carousel-*-CSS hier: das in beiden Apps unter
 * public/vendor/frontend/assets/bootstrap/ vendorte bootstrap.min.css ist
 * (anders als beim alten System) bereits vollstaendiges Bootstrap 5 inkl.
 * Carousel-Komponente (siehe data-bs-toggle in header.blade.php) - eigene
 * Regeln wuerden nur mit den dortigen --bs-carousel-*-Variablen kollidieren.
 */
.ql-display p,
.ql-display ol,
.ql-display ul,
.ql-display pre,
.ql-display blockquote,
.ql-display h1,
.ql-display h2,
.ql-display h3,
.ql-display h4,
.ql-display h5,
.ql-display h6 {
    margin: 0;
    padding: 0;
    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}

.ql-display {
    line-height: 1.42;
    overflow-y: auto;
    text-align: left;
    overflow: hidden;
}

.ql-display ol {
    list-style-type: lower-alpha;
}

.ql-display blockquote {
    border-left: 4px solid #ccc;
    margin-bottom: 5px;
    margin-top: 5px;
    padding-left: 16px;
}

.ql-display ol,
.ql-display ul {
    padding-left: 1.5em;
}

.ql-display ol li {
    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
    counter-increment: list-0;
}

.ql-display .ql-indent-1:not(.ql-direction-rtl) {
    padding-left: 3em;
}

.ql-display .ql-indent-2:not(.ql-direction-rtl) {
    padding-left: 6em;
}

.ql-display .ql-indent-3:not(.ql-direction-rtl) {
    padding-left: 9em;
}

.ql-display .ql-indent-4:not(.ql-direction-rtl) {
    padding-left: 12em;
}

.ql-display .ql-indent-5:not(.ql-direction-rtl) {
    padding-left: 15em;
}

.ql-display .ql-indent-6:not(.ql-direction-rtl) {
    padding-left: 18em;
}

.ql-display .ql-indent-7:not(.ql-direction-rtl) {
    padding-left: 21em;
}

.ql-display .ql-indent-8:not(.ql-direction-rtl) {
    padding-left: 24em;
}

.ql-display .ql-size-small {
    font-size: 0.75em;
}

.ql-display .ql-size-large {
    font-size: 1.5em;
}

.ql-display .ql-size-huge {
    font-size: 2.5em;
}

.ql-display .ql-align-center {
    text-align: center;
}

.ql-display .ql-align-center img {
    text-align: center;
    float: unset !important;
}

.ql-display .ql-align-right {
    text-align: right;
}

.ql-display .ql-align-justify {
    text-align: justify;
}

/*
 * .post-info (Datumszeile am Ende der Einheiten-Seite) ist site-spezifisch,
 * nicht Teil von Bootstrap. Im vendorten bootstrap.min.css existiert zwar
 * eine gleichnamige Regel, aber nur verschachtelt unter
 * .clean-block.clean-post .post-body .post-info - unsere .post-info liegt
 * als Geschwister von .post-body, nicht darunter, daher eigene Regel noetig.
 */
.post-info {
    font-size: 14px;
    color: #888;
}