/**
 * HRTime Mittelstand – Spezifische Styles
 * URL: /zeiterfassung-mittelstand/
 * Basis-CSS: loesungsseiten-styles.css (wird extern geladen)
 * Dieses File enthält NUR Mittelstand-spezifische Overrides
 *
 * Prefix: hrt-ms- (Mittelstand-spezifisch)
 * Version: 1.0 – Februar 2026
 * ===================================================================
 *
 * INHALT:
 *  1. Hero Override (Mittelstand-Gradient)
 *  2. DATEV-Badge Highlight
 *  3. Übergangsfristen-Box
 *  4. Mittelstand Trust-Badge Anpassung
 *  5. Wave Divider
 *  6. Responsive Anpassungen
 * ===================================================================
 */

/* ===================================================================
   CSS CUSTOM PROPERTIES – Mittelstand-spezifisch
   (Erben die globalen Variablen aus loesungsseiten-styles.css)
   =================================================================== */
:root {
    --hrt-ms-green: #27ae60;
    /* Mittelstand-Akzentfarbe für DATEV/Pflicht-Badges */
    --hrt-ms-green-light: #e8f8f0;
    /* Hintergrund für Highlight-Boxen */
    --hrt-ms-datev-blue: #0056a6;
    /* DATEV-Markenblau (Referenzfarbe) */
    --hrt-ms-datev-blue-light: #e6f0fb;
}

/* ===================================================================
   1. HERO OVERRIDE – Mittelstand
   Gleiche Basis wie Großunternehmen (Elementor Wave Pattern)
   Hintergrundbild + Orange-Gradient-Overlay + Wave SVG Divider
   ⚠️ MUSS NACH loesungsseiten-styles.css geladen werden!
   =================================================================== */

/* --- 1a. Hintergrundbild (seitenspezifisch – pro Seite austauschbar) --- */
.hrt-ms-hero {
    background-image: url('https://www.hrtime.de/wp-content/uploads/2026/02/Arbeitszeiterfassung-fuer-den-Mittelstand.avif');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: transparent;
    position: relative;
}

/* --- 1b. Gradient Overlay: Orange links (90% opacity) → transparent rechts --- */
.hrt-ms-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(230, 81, 0, 0.9) 0%, rgba(230, 81, 0, 0.9) 50%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

/* --- 1c. Wave Shape Divider (Elementor wave pattern, flipped) --- */
.hrt-ms-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleY(-1);
    width: 260%;
    height: 120px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none"><path d="M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7c23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V0H0v30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4c21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z" fill="white"/></svg>');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 20;
    pointer-events: none;
    clip-path: none;
    background-color: transparent;
}

/* --- 1d. Floating Shapes – z-index über dem Overlay --- */
.hrt-ms-hero .hrt-ls-hero-shapes {
    z-index: 8;
}

/* --- 1e. Hero Content – z-index über Overlay + Shapes --- */
.hrt-ms-hero .hrt-ls-hero-content {
    position: relative;
    z-index: 10;
}

/* --- 1f. Animation-Fix: Elemente sofort sichtbar (Elementor-Kompatibilität) --- */
.hrt-ls-animate {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* --- 1g. Kacheln breiter: 900px → 1100px für Mittelstand --- */
.hrt-ze-integrations__grid--3col {
    max-width: 1100px;
}

/* ===================================================================
   2. WAVE DIVIDER – nach Hero
   Trennt Hero von Stats-Bar mit weichem Übergang
   =================================================================== */
.hrt-ms-wave-divider {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    margin-top: -2px;
    background: transparent;
}

.hrt-ms-wave-divider svg {
    display: block;
    width: 100%;
    height: 60px;
}

/* ===================================================================
   3. DATEV-BADGE – Hervorhebung der DATEV-Integration
   Wird in Trust-Badges und Feature-Cards verwendet
   =================================================================== */
.hrt-ms-datev-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--hrt-ms-datev-blue-light);
    color: var(--hrt-ms-datev-blue);
    border: 1.5px solid var(--hrt-ms-datev-blue);
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.hrt-ms-datev-badge i {
    font-size: 1rem;
}

/* DATEV-spezifischer Trust-Badge Override */
.hrt-ls-trust-badge .fas.fa-file-invoice-dollar {
    color: var(--hrt-ms-datev-blue);
}

/* ===================================================================
   4. ÜBERGANGSFRIST-HIGHLIGHT BOX
   Besondere Hervorhebung der 2-Jahres-Frist für 50–249 MA
   =================================================================== */
.hrt-ms-transition-box {
    background: var(--hrt-ms-green-light);
    border: 2px solid var(--hrt-ms-green);
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 24px 0;
}

.hrt-ms-transition-box__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: var(--hrt-ms-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
}

.hrt-ms-transition-box__content {
    flex: 1;
}

.hrt-ms-transition-box__title {
    font-weight: 700;
    color: #1a1a2e;
    font-size: 1rem;
    margin-bottom: 6px;
    display: block;
}

.hrt-ms-transition-box__text {
    color: #444;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* ===================================================================
   5. MITTELSTAND STATS-BAR – leichte Farbanpassung für Suffix
   Suffix "Tage" soll kleiner erscheinen als Zahl
   =================================================================== */
.hrt-ls-stats-bar .hrt-ls-suffix {
    font-size: 0.75em;
    font-weight: 600;
    vertical-align: middle;
}

/* ===================================================================
   6. LEGAL IMAGE BADGE – "2 Jahre Übergangsfrist" Mittelstand
   Basis-Style (orange) kommt aus loesungsseiten-styles.css – kein Override
   =================================================================== */

/* ===================================================================
   7. FAQ – Mittelstand-spezifische ID-Anpassung
   FAQ-IDs: faq-ms-answer-* (kein Konflikt mit GU-FAQ-IDs)
   Die CSS-Klassen bleiben identisch (hrt-ls-faq-*)
   =================================================================== */

/* Erste FAQ offen = sichtbares Signal an User -->
/* Wird per JS gesteuert, kein extra CSS nötig */

/* ===================================================================
   8. PROCESS HIGHLIGHT – Farbe wie Großunternehmen (Blau)
   Einheitliches Design über alle Lösungsseiten
   margin-top: auto → Highlights auf einer Linie am unteren Rand
   =================================================================== */
.hrtime-process-highlight {
    background: #E3F2FD;
    border-left: 4px solid #5272C5;
    border-radius: 8px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #0B1933;
    margin-top: auto;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* ===================================================================
   9. COMPARISON TABLE – Mittelstand-Header
   Farbanpassung für "Excel / Stundenzettel" Header
   =================================================================== */
.hrt-ls-comparison-old[role="columnheader"] {
    background: rgba(231, 76, 60, 0.08);
    color: #c0392b;
}

/* ===================================================================
   10. BRANCHEN SECTION – Mittelstand-spezifischer Einleitungstext
   =================================================================== */
#branchen-mittelstand .hrt-ls-section-intro {
    max-width: 680px;
}

/* ===================================================================
   11. AUDIENCE PILLS – Basis-Style (blau+orange) aus loesungsseiten-styles.css
   Kein Override nötig – identisch wie Großunternehmen
   =================================================================== */

/* ===================================================================
   12. CTA SECTION – Basis-Style aus loesungsseiten-styles.css
   Kein Override nötig – alle Icons einheitlich orange
   =================================================================== */

/* ===================================================================
   13. LEGAL HIGHLIGHT BOX – Mittelstand Reform 2026
   Basis-Style (orange Border, Hover, ::before Glow) kommt aus
   loesungsseiten-styles.css – kein Override nötig
   =================================================================== */

/* ===================================================================
   14. RESPONSIVE – Mittelstand-spezifische Breakpoints
   Alle Basis-Responsive-Styles kommen aus loesungsseiten-styles.css
   Hier nur Overrides für Mittelstand-spezifische Elemente
   =================================================================== */
@media (max-width: 768px) {

    .hrt-ms-transition-box {
        flex-direction: column;
        gap: 12px;
    }

    .hrt-ms-datev-badge {
        font-size: 0.8rem;
        padding: 5px 10px;
    }

    .hrtime-process-highlight {
        font-size: 0.83rem;
    }


}

@media (max-width: 480px) {

    /* Overlay auf kleinen Screens verstärken für bessere Lesbarkeit */
    .hrt-ms-hero::before {
        background: linear-gradient(90deg, rgba(230, 81, 0, 0.95) 0%, rgba(230, 81, 0, 0.85) 100%);
    }

    .hrt-ms-transition-box {
        padding: 14px 16px;
    }
}