/* Datei: assets/css/base.css */

/* 1. Reset/Grundlagen */
html, body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
    background: #f8fafd;
    color: #23272f;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: border-box;
}

/* 2. Container/Card */
.ad-card, .ad-container {
    background: #fff;
    border-radius: 1.1em;
    box-shadow: 0 2px 10px rgba(0,20,40,0.08);
    padding: 1.2em 1em;
    margin-bottom: 1.2em;
    transition: box-shadow 0.2s;
}

.ad-card:hover {
    box-shadow: 0 6px 24px rgba(60,90,120,0.09);
}

/* 3. Buttons */
.ad-btn, .ad-button {
    display: inline-block;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 2em;
    padding: 0.65em 1.4em;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.18s;
}
.ad-btn:active, .ad-btn:focus {
    background: #1e40af;
}
.ad-btn-outline {
    background: #fff;
    color: #2563eb;
    border: 1.5px solid #2563eb;
}
.ad-btn-outline:active, .ad-btn-outline:focus {
    background: #e5edfa;
}

/* 4. Listen */
.ad-list, .ad-list-unstyled {
    list-style: none;
    padding: 0;
    margin: 0 0 1em 0;
}
.ad-list li {
    padding: 0.7em 0;
    border-bottom: 1px solid #eee;
}
.ad-list li:last-child {
    border-bottom: none;
}




/* 5. Utilities */
.text-center { text-align: center; }
.mt-1 { margin-top: 0.75em; }
.mt-2 { margin-top: 1.5em; }
.mb-1 { margin-bottom: 0.75em; }
.mb-2 { margin-bottom: 1.5em; }
.d-flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* 6. Responsive Grid-Helpers */
@media (min-width: 600px) {
    .ad-container { padding: 2em 2em; }
}

@media (min-width: 900px) {
    body {
        font-size: 17px;
    }
    .ad-dashboard-main {
        max-width: 1100px;
        margin: 2.5em auto;
    }
}

/* 7. Hide/Show für Mobile/Desktop */
.hide-mobile { display: none !important; }
@media (min-width: 768px) {
    .hide-desktop { display: none !important; }
    .hide-mobile { display: initial !important; }
}