/* ---------------------------------------------------------------------------
 * assets/css/consent-modal.css – Zustimmungs-Popup nach dem Anmelden
 *
 * Eigene Datei aus dem in CLAUDE.md beschriebenen Grund: assets/css/tailwind.css
 * ist ein gepurgter Build und liegt nicht in Git. Klassen, die im letzten
 * lokalen Build nicht vorkamen, fehlen auf DEV ersatzlos – das Element wird
 * dann ohne Hintergrund gerendert, ohne Fehler und ohne Konsolenmeldung.
 * Bei einem Modal hiesse das: ein unsichtbarer Kasten ueber der Seite.
 *
 * `confirm-modal.css` bringt mit .cq-modal-overlay/.cq-modal ein aehnliches
 * Muster mit. Bewusst nicht wiederverwendet: jenes Modal ist eine schmale
 * Bestaetigungsbox (min-width 280px, kein Scrollbereich), dieses traegt den
 * vollstaendigen Rechtstext. Die beiden Groessenordnungen in einer Klasse zu
 * vereinen haette beide schlechter gemacht.
 * ------------------------------------------------------------------------- */

.cq-cm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    padding: 1rem;
}

/* Erst per JS gesetzt. Ohne JS bleibt das Popup unsichtbar und der
   Hinweisbalken uebernimmt – die Seite ist in jedem Fall bedienbar. */
.cq-cm-overlay.open {
    display: flex;
}

.cq-cm-box {
    background: #fff;
    width: 100%;
    max-width: 42rem;
    border-radius: .75rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
    display: flex;
    flex-direction: column;
    /* Der Kasten passt sich der Fensterhoehe an; gescrollt wird INNEN im
       Textbereich, damit Haekchen und Knopf immer sichtbar bleiben. Genau
       das ging vorher schief, wenn der Rechtstext laenger war als das
       Fenster hoch: der Zustimmen-Knopf lag unter der Kante. */
    max-height: 90vh;
    overflow: hidden;
}

.cq-cm-kopf {
    padding: 1rem 1.25rem .75rem;
    border-bottom: 1px solid #e5e7eb;
}

.cq-cm-titel {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
}

.cq-cm-inhalt {
    padding: 1rem 1.25rem 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;   /* sonst waechst der Flex-Kasten ueber max-height hinaus */
}

.cq-cm-intro {
    margin: 0 0 .75rem;
    font-size: .875rem;
    color: #374151;
}

.cq-cm-text {
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    padding: .75rem 1rem;
    overflow-y: auto;
    min-height: 0;
    font-size: .85rem;
    line-height: 1.5;
    color: #374151;
    background: #fafafa;
}

/* Der Rechtstext bringt eigene Ueberschriften und Abstaende mit. Im Modal
   duerfen die kleiner ausfallen als auf der Vollseite. */
.cq-cm-text h1,
.cq-cm-text h2 {
    font-size: .95rem;
    font-weight: 700;
    margin: 1rem 0 .35rem;
    color: #111827;
}

.cq-cm-text h1:first-child,
.cq-cm-text h2:first-child {
    margin-top: 0;
}

.cq-cm-text p {
    margin: 0 0 .5rem;
}

.cq-cm-fuss {
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.cq-cm-haken {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .875rem;
    color: #111827;
    cursor: pointer;
}

.cq-cm-haken input {
    margin-top: .2rem;
    flex: 0 0 auto;
}

.cq-cm-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.cq-cm-knopf {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    border-radius: .5rem;
    padding: .6rem 1.1rem;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
}

.cq-cm-knopf:hover {
    background: #f3f4f6;
}

.cq-cm-knopf--primaer {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}

.cq-cm-knopf--primaer:hover {
    background: #1e40af;
}

.cq-cm-fein {
    margin: 0;
    font-size: .78rem;
    color: #6b7280;
}

.cq-cm-fein a {
    color: #1d4ed8;
    text-decoration: underline;
}

@media (max-width: 640px) {
    .cq-cm-overlay { padding: .5rem; }
    .cq-cm-box     { max-height: 95vh; }
    .cq-cm-knopf   { flex: 1 1 auto; text-align: center; }
}