/**
 * src/css/infos.css
 * ZUSTÄNDIGKEIT: Design der Info-Ansicht (Über uns).
 * UPDATE v17.0: 
 * - FIX: Überlagerung durch explizite Margin-Bottom Regeln und verstärktes Flex-Gap behoben.
 * - DESIGN-SYNC: Kacheln nutzen jetzt exakt dieselben Schatten und Radien wie die Favoriten.
 * - TYPOGRAFIE: Voller Sync mit dem Master-Standard (Labels 12px, Werte 18px).
 * - OVERRIDE: Entfernt zentrierende Justification aus base.css für besseren Textfluss.
 * STATUS: v17.0 - UI Perfection & Spacing Fix.
 */

/* ==========================================================================
   1. HAUPTCONTAINER (Zentrierung & Shell)
   ========================================================================== */

.info-view-layout.content-box {
    align-items: center !important;
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: 20px !important;
}

.info-view-container {
    width: 100% !important;
    max-width: 1000px !important; /* Sync mit App-Header */
    margin: 0 auto !important;
    padding: 20px 0 150px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    
    /* FIX: Massiver Abstand zwischen den Dossier-Kacheln */
    gap: 60px !important; 
    
    animation: fadeIn 0.6s ease-out forwards;
}

/* ==========================================================================
   2. DIE DOSSIER-KACHELN (STRENGER SYNC)
   ========================================================================== */

.info-view-container .dossier-card {
    width: 100% !important;
    max-width: 1000px !important;
    background: var(--white) !important;
    
    /* Erhöhtes Padding für mehr Luftigkeit wie im Screenshot gewünscht */
    padding: 70px 60px !important;
    
    border-radius: var(--radius-lg, 25px) !important;
    box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,0.05)) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important; /* Override base.css center */
    text-align: left !important;
    
    /* FIX: Zusätzlicher Margin-Bottom als Fallback gegen Überlagerung */
    margin-bottom: 20px !important; 
    position: relative !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-view-container .dossier-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.1) !important;
}

/* Spezial-Kachel mit grünem Akzent oben */
.info-view-container .highlight-tile {
    border-top: 8px solid var(--accent-green) !important;
}

/* ==========================================================================
   3. TYPOGRAFIE (SYNC MIT v18.0 STANDARDS)
   ========================================================================== */

.info-main-title {
    font-size: 38px !important;
    font-weight: 900 !important;
    color: var(--text-dark);
    margin: 0 0 40px 0 !important;
    padding-bottom: 25px !important;
    border-bottom: 6px solid var(--accent-yellow);
    width: 100%;
    line-height: 1.1;
    letter-spacing: -1.5px;
}

.info-tile-title {
    font-size: 28px !important;
    font-weight: 900 !important;
    color: var(--text-dark);
    margin-bottom: 35px !important;
    letter-spacing: -0.5px;
}

.info-highlight-text {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--accent-green);
    margin-bottom: 30px !important;
    line-height: 1.5 !important;
}

.info-text-p {
    font-size: 18px !important;
    line-height: 1.9 !important;
    color: #444 !important;
    margin-bottom: 25px !important;
    font-weight: 500;
}

.info-label {
    font-size: 12px !important; /* MASTER SYNC */
    font-weight: 900 !important;
    color: #bbb !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    display: block;
    margin-bottom: 12px !important;
}

/* ==========================================================================
   4. SPEZIAL-ELEMENTE (NOTICE & BUTTONS)
   ========================================================================== */

.info-notice-box {
    margin-top: 45px !important;
    padding: 35px !important;
    border: 2px dashed #f0f0f0 !important;
    border-radius: 22px !important;
    display: flex !important;
    gap: 30px !important;
    align-items: center !important;
    background: #fcfcfc !important;
}

.info-notice-box i {
    color: var(--accent-yellow);
    font-size: 28px !important;
    flex-shrink: 0;
}

.info-notice-content {
    font-size: 15px !important;
    color: #666 !important;
    line-height: 1.7 !important;
    font-weight: 600;
}

.legal-btn-row {
    display: flex !important;
    gap: 25px !important;
    margin-top: 15px !important;
}

.legal-btn-row .auth-button {
    flex: 1 !important;
    height: 75px !important;
    font-size: 16px !important;
    border-radius: 18px !important;
    letter-spacing: 1px !important;
}

/* ==========================================================================
   5. MOBILE OPTIMIERUNG
   ========================================================================== */

@media (max-width: 768px) {
    .info-view-container {
        padding: 10px !important;
        gap: 35px !important;
    }

    .info-view-container .dossier-card { 
        padding: 45px 25px !important; 
        margin-bottom: 15px !important;
    }

    .info-main-title { font-size: 28px !important; }
    .info-tile-title { font-size: 24px !important; }
    .info-highlight-text { font-size: 19px !important; }
    .info-text-p { font-size: 17px !important; }
    
    .legal-btn-row { 
        flex-direction: column !important; 
        gap: 20px !important;
    }
    
    .info-notice-box {
        flex-direction: column !important;
        text-align: center !important;
        padding: 25px !important;
    }
}