/* Feinschliff: Touch-Verhalten, Druck-Feedback, ruhigere Bewegung (2026-10-18)
   Nach typografie.css geladen. Regeln nach Emil Kowalski (design engineering / mobile-native). */

:root {
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* 1. Kein grauer/blauer Blitz beim Antippen, keine Schrift-Aufblähung im Querformat */
html {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}

/* 2. Kein 300-ms-Warten auf Doppeltipp */
a, button, summary, [role="button"] {
    touch-action: manipulation;
}

/* 3. Langes Drücken markiert keine Button-Beschriftung */
button, summary, .btn, .btn-outline, .btn-white, .cookie-btn, .share-btn, .mobile-cta-btn,
.filter-btn, .fw-modal-btn, .posts-all-btn, .nav-cta, .sidebar-cta a, .reviews-cta a, .hamburger {
    -webkit-user-select: none;
    user-select: none;
}

/* 4. Touch-Geräte: Hover-Effekte (Anheben/Vergrößern) bleiben nach dem Tippen nicht "kleben" */
@media (hover: none) {
    .blog-card:hover, .btn-outline:hover, .btn-white:hover, .btn:hover, .cookie-btn:hover,
    .feature-item:hover, .feature-item:hover .feature-icon, .festpreise-card:hover, .fw-modal-btn:hover,
    .info-card:hover, .info-card:hover .info-icon, .partner-card:hover, .post-card:hover,
    .posts-all-btn:hover, .posts-all-btn:hover .arrow, .pricing-card:hover, .pricing-card:hover svg,
    .process-card:hover, .process-step:hover, .project-card:hover, .project-card:hover .project-shot img,
    .review-card:hover, .service-card:hover, .service-card:hover .service-icon, .share-btn:hover,
    .sidebar-cta a:hover, .team-card:hover, .team-card:hover .team-avatar, .value-card:hover,
    .value-card:hover .value-icon, .zuschlag-item:hover, .contact-item:hover .contact-item-icon {
        transform: none;
    }
}

/* 5. Druck-Feedback: Buttons geben beim Antippen/Klicken sofort leicht nach */
.btn:active, .btn-outline:active, .btn-white:active, .cookie-btn:active, .share-btn:active,
.mobile-cta-btn:active, .filter-btn:active, .fw-modal-btn:active, .posts-all-btn:active,
.nav-cta:active, .sidebar-cta a:active, .reviews-cta a:active, html .its-quick button:active {
    transform: scale(0.97);
    transition: transform 120ms var(--ease-out);
}
html .its-chat-btn:active {
    transform: scale(0.94);
    transition: transform 120ms var(--ease-out);
}

/* 6. Filter-Buttons im Blog: konkrete Eigenschaften statt "transition: all" */
.filter-btn {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* 7. Chatbot: iPhone zoomt nicht mehr ins Eingabefeld (iOS zoomt bei Schrift unter 16 px) */
html .its-chat-form textarea {
    font-size: 16px;
}
/* Scrollen im Chatverlauf schiebt am Ende nicht die Seite dahinter mit */
html .its-chat-body {
    overscroll-behavior: contain;
}
/* Chatfenster erscheint aus dem Chat-Button heraus statt schlagartig */
html .its-chat.open {
    transform-origin: bottom right;
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
@starting-style {
    html .its-chat.open {
        opacity: 0;
        transform: translateY(8px) scale(0.96);
    }
}

/* 8. Mobiles Menü gleitet kurz ein statt aufzuspringen */
@media (max-width: 768px) {
    nav.open {
        transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
    }
    @starting-style {
        nav.open {
            opacity: 0;
            transform: translateY(-6px);
        }
    }
}

/* 9. Funkelnde Hintergrund-Punkte entstehen nicht mehr "aus dem Nichts" (scale 0) */
@keyframes twinkle {
    0% { opacity: 0; transform: scale(0.6); }
    50% { opacity: 1; transform: scale(1); }
    100% { opacity: 0.3; transform: scale(1); }
}

/* 10. "Bewegung reduzieren" (Betriebssystem-Einstellung): Dauer-Animationen anhalten,
       Farb-/Transparenz-Übergänge bleiben */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
    html .its-chat.open, nav.open {
        transition: opacity 150ms ease;
    }
    /* Bewertungs-Laufband steht still, Bewertungen lassen sich stattdessen wischen */
    .reviews-track-wrapper {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
    }
    .reviews-track {
        animation: none !important;
    }
    .review-card {
        scroll-snap-align: start;
    }
}

/* ===== Barrierefreiheit: Kontrast nach WCAG 2.2 AA (2026-10-22) =====
   Gemessen mit axe-core und dem Impeccable-Detektor. Nur Farbtöne dunkler gesetzt,
   Aufbau und Optik bleiben. Neue Seiten bekommen das automatisch über diese Datei. */

/* Blaue Links auf hellblauen Flächen: #1869F9 erreicht dort nur 4,1–4,46:1 */
.content-block a:not([class]),
.service-more, .festpreise-more, .post-more,
.partner-card a:not(.btn), .case-box a, .team-card a,
.faq-item a, .faq-answer a {
    color: #1258d6;
}
/* Links im Fließtext der Rechtstexte: hellblau (2,7:1) und nur an der Farbe erkennbar */
.content-wrapper a {
    color: #1258d6;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Footer: Text mit 75 % Deckkraft (3,1:1) und hellblaue Links (4,1:1) */
footer p, footer a { opacity: 1 !important; }
footer a:not([style*="28375F"]) { color: #1258d6 !important; }

/* Weiße Schrift auf hellblauem Verlauf (#56B3FF, nur 2,3:1) */
.sidebar-cta, .step-number, .rule-card, .team-avatar,
.blog-card.featured .featured-badge, .posts-all-btn:hover {
    background: linear-gradient(135deg, #1558d6, #1d4ed8);
}
.sidebar-cta p { opacity: 1; }
.cta .btn { background: linear-gradient(135deg, #1558d6, #1d4ed8); }

/* Tabellenköpfe: Verlauf endete bei #1A7BFF (3,9:1) */
.patch-table th, .price-table th {
    background: linear-gradient(135deg, #28375F, #1366e0);
}

/* Abschlussbereich im Blog: Text mit 90 % Deckkraft auf Blau (4,1:1) */
.cta-section p { opacity: 1; }

/* Schweregrade in den Patchday-Tabellen */
.severity-important { color: #c2410c; }
.severity-critical { color: #b91c1c; }

/* Tastaturfokus für scrollbare Bereiche (Bewertungen, Vergleichstabellen) */
.reviews-track-wrapper:focus-visible,
.table-wrap:focus-visible {
    outline: 3px solid #1258d6;
    outline-offset: 4px;
}

/* Einzelne Hervorhebungen in Blogartikeln und auf Über uns */
.example-mail .highlight { color: #b91c1c; }
.tag-free { color: #047857; }
.damage-card.rep .damage-label { color: #c2410c; }
.severity-moderate { color: #b45309; }
.case-box .case-label, .team-role { color: #1258d6; }