/* ===========================================================================
   „Mit mir geteilt" — Module, die Kollegen freigegeben haben (D5 / Topf C)

   Markup:    templates/geteilt/geteilt.html
   Verhalten: src/features/creator/geteilteModule.js

   Vorher lagen diese Regeln als ~15 Inline-Stile in `MyModulesPage.js`. Die
   Bauvorgabe für Topf C: jede angefasste Stelle wandert nach F.1/F.2 — damit
   sinkt die Sperrklinken-Grundlinie, statt nur gehalten zu werden.

   Alle Farben über die Variablen aus `variables.css`: hart gesetzte Werte
   brechen beim Aussehenswechsel.
   =========================================================================== */

.geteilt-abschnitt {
    margin-top: 2.5rem;
}

.geteilt-titel {
    font-size: 1.1rem;
    color: var(--color-text-light);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.5rem;
}

/* Der Leerzustand (D7). Vorher verschwand der ganze Abschnitt kommentarlos —
   und wer nicht weiß, dass es die Funktion gibt, vermisst sie auch nicht. */
.geteilt-leer {
    margin: 0.75rem 0 0 0;
    font-size: 0.875rem;
    color: var(--color-text-light);
}

/* --- Ein geteiltes Modul ------------------------------------------------ */

.geteilt-modul {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-top: 0.75rem;
}

.geteilt-modul-kopf {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.geteilt-modul-name {
    flex: 1;
    min-width: 0;
}

.geteilt-rolle {
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    padding: 0.1rem 0.6rem;
    font-size: 0.8rem;
    color: var(--color-text-light);
    flex-shrink: 0;
}

.geteilt-von {
    color: var(--color-text-light);
    flex-shrink: 0;
}

.geteilt-inhalte {
    margin-top: 0.75rem;
    padding-left: 1rem;
}

/* --- Eine Inhaltszeile --------------------------------------------------- */

.geteilt-zeile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--color-border);
}

.geteilt-zeile:last-child {
    border-bottom: none;
}

.geteilt-zeile-titel {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.geteilt-zeile-art {
    color: var(--color-text-light);
    flex-shrink: 0;
}

.geteilt-hinweis {
    color: var(--color-text-light);
    font-size: 0.875rem;
    padding: 0.4rem 0;
}

@media (max-width: 640px) {
    .geteilt-zeile {
        flex-wrap: wrap;
    }

    .geteilt-modul-kopf {
        flex-wrap: wrap;
    }
}

/* --- Vorschau in der geteilten Inhaltszeile (16.08.2026) ---------------- */

/* Nur die Einbettung. Aussehen, weißer Papier-Hintergrund und Lupe kommen aus
   `svg-preview-shared.css` — dieselben Klassen wie in den Creatoren. */
.geteilt-eintrag + .geteilt-eintrag {
    margin-top: 0.25rem;
}

.geteilt-vorschau {
    margin: 0.25rem 0 0.5rem 0;
    max-width: 420px;
}