/* profile-mobile.css — Mobil-Regeln NUR fuer profile.html.
 *
 * Nicht in mobile.css: die Datei ist geteilt und wird von 55 Seiten geladen.
 * Anlass (20.09.2026): Am Handy (375 px) hatte der tiefste Text im Profil noch
 * 138 px Breite, weil sieben Ebenen Innenabstaende und Rahmen uebereinanderliegen.
 * Unter 480 px nehmen diese Regeln je Ebene Abstand weg und machen aus den
 * Karten flache Baender ohne Seitenrahmen. Die Klassen pd-card, iv-card,
 * iv-video, iv-add und cf-leer setzt profile.js (Inline-Styles dort brauchen
 * !important).
 */
@media (max-width: 480px) {
    /* Ebene 0/1: Seitenrahmen und Profilkasten */
    .container {
        padding-left: max(8px, env(safe-area-inset-left));
        padding-right: max(8px, env(safe-area-inset-right));
    }
    .profile-container {
        padding: 14px 10px;
        margin: 12px auto;
    }
    .profile-container > h1 {
        font-size: 1.6em;
        margin: 0 0 10px;
    }
    #leistungenLink {
        margin: 10px 0 2px !important;
        padding: 10px 12px !important;
    }

    /* Ebene 2: Inhalt eines aufgeklappten Bereichs */
    .collapsible-content {
        padding: 10px 6px;
    }

    /* Ebene 3: Karten werden zu Baendern — oben/unten Linie, seitlich nichts */
    .document-upload-section {
        padding: 12px 10px;
        margin-bottom: 10px;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }
    .document-upload-section h4 {
        font-size: 15px;
        margin-bottom: 10px;
    }

    /* Ebene 4: von profile.js erzeugte Karten */
    .pd-row-head { padding: 10px !important; }
    .pd-card { padding: 2px 10px 12px !important; }
    .iv-card { padding: 10px !important; margin-top: 14px !important; }
    .iv-video { padding: 10px !important; }
    .iv-add { padding: 8px !important; }
    /* Sprachumschalter Deutsch/English/Francais: eine Zeile, drei gleiche Segmente */
    .iv-lang { display: flex !important; }
    /* mobile.css setzt unter 480px jeden button auf width:100% — hier drei Segmente nebeneinander */
    .iv-lang button { width: auto !important; flex: 1 1 0 !important; padding: 7px 6px !important; min-width: 0; }

    /* Formularfelder mit width:100% + Innenabstand ragten aus den flacheren Baendern */
    .document-upload-section input,
    .document-upload-section select,
    .document-upload-section textarea {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* "Mein Bereich": zwei Spalten mit kompakten Karten statt acht Karten untereinander */
    #favoritesCreditsSection > div {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
    #favoritesCreditsSection h3 {
        margin-bottom: 8px !important;
        font-size: 1.05em;
    }
    .profile-card {
        padding: 10px 6px;
        border-radius: 10px;
    }
    .profile-card .card-icon { font-size: 1.4em; margin-bottom: 2px; }
    .profile-card .card-value { font-size: 1.25em; }
    .profile-card .card-label {
        font-size: 0.75em;
        margin-top: 2px;
        line-height: 1.2;
        text-align: center;
    }

    /* Arbeitsvertraege ohne Angebote: nur der Hinweis und der Selbst-Upload */
    .cf-leer .cf-counters,
    .cf-leer #cfNavBar,
    .cf-leer #cfContent { display: none !important; }
    .cf-leer #cfSlide { padding: 10px !important; }
    .cf-leer #cfSelfUpload {
        border-top: 0 !important;
        margin-top: 6px !important;
        padding-top: 0 !important;
    }
}