/* ================================================================
   Mausklasse – Custom Styles (ergänzend zu Tailwind CSS)
   ================================================================ */

/* ---- Typografie ---- */
* {
    font-family: 'Quicksand', sans-serif;
}

/* ---- Farb-Variablen ---- */
:root {
    --maus-orange: #FF6600;
    --maus-dark:   #CC5200;
    --maus-light:  #FF8C33;
    --maus-yellow: #FFCC00;
    --maus-blue:   #003399;
    --maus-bg:     #FFF9F0;
}

/* ---- Globale Input-Klasse ---- */
.input-field {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    border: 2px solid #fed7aa; /* orange-200 */
    background: white;
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: #1a1a1a;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}
.input-field:focus {
    border-color: var(--maus-orange);
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.15);
}
.input-field::placeholder {
    color: #c0b0a0;
    font-weight: 500;
}

/* ---- Animationen ---- */
@keyframes bounce-slow {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}
.bounce-animation {
    animation: bounce-slow 2s ease-in-out infinite;
}

/* ---- Fortschrittsbalken ---- */
.progress-bar {
    height: 8px;
    background: #f3e5d8;
    border-radius: 99px;
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    background: var(--maus-orange);
    border-radius: 99px;
    transition: width 0.6s ease;
}

/* ---- Karten Hover ---- */
.card-hover {
    transition: transform 0.2s, box-shadow 0.2s;
}
.card-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(255, 102, 0, 0.12);
}

/* ---- Wellenform (Trennlinie) ---- */
.wave-divider {
    position: relative;
    overflow: hidden;
}

/* ---- Scrollbalken ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #fff3e8; }
::-webkit-scrollbar-thumb { background: #ffb380; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--maus-orange); }

/* ---- Mobile-Optimierungen ---- */
@media (max-width: 640px) {
    .input-field { font-size: 1rem; } /* verhindert iOS-Zoom */
}

/* ---- Galerie Masonry ---- */
.gallery-grid {
    columns: 2;
    column-gap: 1rem;
}
@media (min-width: 768px) {
    .gallery-grid { columns: 3; }
}
.gallery-grid > * {
    break-inside: avoid;
    margin-bottom: 1rem;
}

/* ---- Tailwind-Erweiterungen ---- */
.bg-maus-orange { background-color: var(--maus-orange); }
.bg-maus-dark   { background-color: var(--maus-dark);   }
.bg-maus-yellow { background-color: var(--maus-yellow); }
.bg-maus-blue   { background-color: var(--maus-blue);   }
.bg-maus-bg     { background-color: var(--maus-bg);     }
.text-maus-orange { color: var(--maus-orange); }
.border-maus-orange { border-color: var(--maus-orange); }

/* ---- Drucklayout (für Helfer-Listen) ---- */
@media print {
    nav, footer, button, form { display: none !important; }
    body { background: white; font-size: 12pt; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ccc; padding: 6px; }
}