/* -----------------------------
 * Bottle-Trade Main Stylesheet
 * Version: 2.0
 * -----------------------------*/

/* Variablen */
@import 'variables/variables.css';

/* Reset und Basis-Styles */
@import 'base/reset.css';
@import 'base/typography.css';
@import 'base/utilities.css';
@import 'base/reset-layout.css'; /* Neues Layout-Reset für nahtlose Container */
@import 'base/full-width.css'; /* Volle Breite für alle Container */

/* Layouts */
@import 'layouts/grid.css';
@import 'layout-spacing.css'; /* Zentrale Abstandsregelungen */

/* Neue moderne Stile */
@import 'themes/modern-backgrounds.css'; /* Moderne Hintergründe */
@import 'components/modern-cards.css'; /* Moderne Kartenkomponenten */
@import 'components/home-map-preview.css'; /* Map-Preview für Home */
@import 'components/auth-forms.css'; /* Verbesserte Formulare für Auth-Seiten */

/* Alte Stile für Kompatibilität */
@import 'base/base.css';
@import 'components/components.css';
@import 'components/navigation.css';
@import 'components/layout.css';
@import 'utils/utils.css';

/* Die einzelnen Komponenten werden später sukzessive aktualisiert,
   daher behalten wir zunächst die bestehenden Imports bei.
*/

.ww-subtitle {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 100%;
    max-width: 600px;
    display: block;
}

.ww-trade-card {
    background: rgba(255,255,255,0.7);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    padding: 2rem;
    display: flex;
    flex-direction: row;
    gap: 2rem;
    border: 1px solid #eee;
    transition: box-shadow 0.2s;
    align-items: flex-start;
    width: 98%;
    max-width: 480px;
    min-width: 240px;
}

@media (max-width: 768px) {
    .ww-trade-card {
        flex-direction: column;
        padding: 1rem;
    }
}

.ww-trade-card {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
}