/* Schmidt Elektrotechnik — Custom CSS */

/* Smooth scroll */
html { scroll-behavior: smooth; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: 0.75rem;
    left: -999px;
    z-index: 100;
    background: #ffffff;
    color: #0d005e;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.skip-link:focus {
    left: 0.75rem;
}

/* Fokus-Ring für Barrierefreiheit */
*:focus-visible {
    outline: 2px solid #3E8E63;
    outline-offset: 2px;
}

/* Prose-Stile für Impressum/Datenschutz */
.prose h2 { color: #0D2B6B; font-weight: 700; font-size: 1.25rem; margin-top: 2rem; margin-bottom: 0.75rem; }
.prose p  { color: #4B5563; line-height: 1.7; margin-bottom: 1rem; }
.prose ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose li { color: #4B5563; margin-bottom: 0.25rem; }
.prose a  { color: #0D2B6B; text-decoration: underline; }

/* Zeiterfassung Buttons */
.btn-kommen {
    background: #16a34a;
    color: white;
    padding: 1rem 2rem;
    border-radius: 1rem;
    font-weight: 700;
    font-size: 1.125rem;
    transition: background 0.2s;
}
.btn-kommen:hover { background: #15803d; }

.btn-gehen {
    background: #dc2626;
    color: white;
    padding: 1rem 2rem;
    border-radius: 1rem;
    font-weight: 700;
    font-size: 1.125rem;
    transition: background 0.2s;
}
.btn-gehen:hover { background: #b91c1c; }

/* ── Navigation ── */
.nav-link {
    position: relative;
    padding-bottom: 2px;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #08b1aa;
    border-radius: 2px;
    transition: width 0.25s ease;
}
.nav-link:hover::after { width: 100%; }

/* ── Hero Animationen ── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes pulseDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.4); opacity: 0.6; }
}

.hero-badge   { animation: fadeInUp 0.5s ease both; }
.hero-h1      { animation: fadeInUp 0.6s 0.1s ease both; }
.hero-sub     { animation: fadeInUp 0.6s 0.2s ease both; }
.hero-btns    { animation: fadeInUp 0.6s 0.3s ease both; }
.pulse-dot    { animation: pulseDot 2s ease-in-out infinite; }

/* ── Karten Feinschliff ── */
.card-service {
    border-top: 3px solid transparent;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.card-service:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(13,43,107,0.10);
    border-top-color: #08b1aa;
}

.stat-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(13,43,107,0.08);
}

/* ── Dark Mode (html.dark via localStorage/prefers-color-scheme) ── */
html.dark body { background-color: #0f172a; color: #cbd5e1; }

html.dark #site-header { background: rgba(15,23,42,0.95) !important; }

html.dark .bg-white  { background-color: #1e293b !important; }
html.dark .bg-se-grau { background-color: #111827 !important; }
html.dark .bg-gray-50 { background-color: #0f172a !important; }

html.dark .text-gray-800 { color: #e2e8f0 !important; }
html.dark .text-gray-700 { color: #cbd5e1 !important; }
html.dark .text-gray-600 { color: #94a3b8 !important; }
html.dark .text-gray-500 { color: #64748b !important; }
html.dark .text-gray-400 { color: #475569 !important; }

html.dark .nav-link { color: #94a3b8 !important; }
html.dark .nav-link:hover { color: #08b1aa !important; }

html.dark .border-gray-100 { border-color: #1e293b !important; }
html.dark .border-gray-200 { border-color: #334155 !important; }

html.dark .shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.5) !important; }
html.dark .shadow    { box-shadow: 0 1px 4px rgba(0,0,0,0.5) !important; }

html.dark .card-service  { background-color: #1e293b; }
html.dark .stat-card     { background-color: #1e293b; }

html.dark .hover\:bg-gray-50:hover { background-color: #1e293b !important; }

html.dark .geo-tag {
    background-color: #1e293b !important;
    border-color:     #334155 !important;
    color:            #cbd5e1 !important;
}

html.dark .prose p,
html.dark .prose li { color: #94a3b8 !important; }

html.dark .text-se-blau   { color: #27B7D1 !important; }

/* Rezensions-Karten Dark Mode */
html.dark section.bg-white         { background-color: #1e293b !important; }
html.dark .bg-gray-50.rounded-2xl  { background-color: #0f172a !important; border-color: #334155 !important; }
html.dark .border-gray-100         { border-color: #334155 !important; }
html.dark .text-se-dunkel { color: #e2e8f0 !important; }
html.dark .prose h2       { color: #0D4C6B !important; }
html.dark .prose a        { color: #0D4C6B !important; }

/* ── Mobile Responsive ── */

/* Tabellen auf Mobile horizontal scrollbar */
@media (max-width: 767px) {
    .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Abstände in Tabellen verkleinern */
    table td, table th { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }

    /* Stempeluhr-Buttons: Mindestgröße für Finger */
    .btn-kommen, .btn-gehen { min-height: 56px; font-size: 1rem; }

    /* Cards: volle Breite, weniger Außenabstand */
    .max-w-md { max-width: 100% !important; }

    /* Grid: auf Mobile immer 1 Spalte */
    .lg\:grid-cols-3, .lg\:grid-cols-2 { grid-template-columns: 1fr !important; }
    .sm\:grid-cols-2 { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}