/* JUGplan — Design System (Entry Point) */
@import url('/css/tokens.css');
@import url('/css/components.css');

/* ─── Reduced Motion (A11y) ─── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .view { animation: none; }
    .cards-grid .card { animation: none; }
    .vote-bar-fill { transition: none; }
    .toast { animation: none; }
    .toast.toast-exit { animation: none; opacity: 0; }
    .ring-item { transition-duration: 0.01ms !important; }
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
    main { padding: var(--space-4); }
    .card { padding: var(--space-5); }
    .login-card { margin: var(--space-8) auto; padding: var(--space-8) var(--space-6); }
    .form-row { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
}

@media (max-width: 640px) {
    #app-header { padding: 0 var(--space-4); }

    .view-header {
        flex-direction: column;
        gap: var(--space-3);
        align-items: stretch;
    }

    .view-header .btn { text-align: center; justify-content: center; }

    .form-row { grid-template-columns: 1fr; }

    .badge { font-size: 0.6875rem; }
    .tab { padding: var(--space-2) var(--space-3); font-size: 0.8125rem; }

    #toast-container { left: var(--space-4); right: var(--space-4); }
    .toast { max-width: none; }
}

@media (max-width: 640px) {
    /* Ring-Menü: kleinerer Radius + kleinerer FAB */
    #ring-fab {
        width: 48px;
        height: 48px;
    }
    #ring-fab svg {
        width: 20px;
        height: 20px;
    }
    .ring-item {
        min-width: 68px;
        min-height: 68px;
        padding: var(--space-3);
    }
    .ring-item svg {
        width: 24px;
        height: 24px;
    }
    .ring-item span {
        font-size: 0.6875rem;
    }

    /* Kalender: auf sehr kleinen Bildschirmen Tagesnamen verbergen */
    .cal-header {
        font-size: 0.625rem;
        padding: var(--space-1);
    }
}

@media (max-width: 360px) {
    .ring-item {
        min-width: 56px;
        min-height: 56px;
        padding: var(--space-2);
    }
    .ring-item svg {
        width: 20px;
        height: 20px;
    }
    .ring-item span {
        font-size: 0.5625rem;
    }
    #ring-fab {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 400px) {
    main { padding: var(--space-3); }
    .card { padding: var(--space-4); border-radius: var(--radius); }
    .login-card { padding: var(--space-6) var(--space-4); }

    /* Kalender: Tagesnamen auf einzelne Buchstaben kürzen (per CSS-Trick: verbergen) */
    .cal-header {
        font-size: 0;
        line-height: 0;
    }
    .cal-header::first-letter {
        font-size: 0.625rem;
        line-height: normal;
    }
}

/* Touch-Optimierung für mobile Geräte */
button,
a.btn,
.btn,
.ring-item,
#ring-fab,
.tab,
.btn-segment,
.toggle-switch,
input[type="checkbox"],
.ring-center-logout {
    touch-action: manipulation;
}

/* Ring-Items: Viewport-Overflow verhindern */
.ring-item {
    max-width: calc(50vw - 2rem);
}

/* ─── Print ─── */
@media print {
    #app-header, #toast-container, #ring-menu, .btn, .skip-link { display: none !important; }
    .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
    body { background: white; }
}