/*
Theme Name: Vikytransports Custom Theme
Theme URI: https://vikytransports.de
Author: AI Assistant
Description: Ein maßgeschneidertes, performantes und SEO-optimiertes WordPress-Theme für Vikytransports. Verwendet Tailwind CSS.
Version: 2.0.0
Text Domain: vikytransports
*/

/* 
 * Das Styling wird nun komplett über Tailwind CSS (via CDN in der header.php) gesteuert.
 * Custom CSS wird hier nur noch für eventuelle WordPress-spezifische Overrides benötigt.
 */

/* WordPress Core Klassen, falls diese nicht von Tailwind abgedeckt werden */
.aligncenter {
    display: block;
    margin: 0 auto;
}
.alignleft {
    float: left;
    margin-right: 1.5em;
}
.alignright {
    float: right;
    margin-left: 1.5em;
}

/* ===== Animations Library ===== */

/* Scroll reveal */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
    .kenburns-slow, .marquee-track { animation: none !important; }
}

/* KenBurns slow zoom for hero background image */
.kenburns-slow {
    animation: kenburns 30s ease-in-out infinite alternate;
}
@keyframes kenburns {
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.08) translate(-1%, -1%); }
}

/* Marquee (trust logo strip) */
.marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 35s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Magnetic button micro-interaction */
.magnetic { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; }

/* Subtle gradient text accent */
.gradient-text {
    background-image: linear-gradient(135deg, #004877 0%, #0079c5 50%, #fc7728 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* Avoid parent filter (drop-shadow) interfering with background-clip:text */
    filter: none;
}

/* Shimmer for CTA */
.shimmer { position: relative; overflow: hidden; }
.shimmer::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,0.25) 50%, transparent 75%);
    transform: translateX(-100%);
    transition: transform 0.8s ease;
    pointer-events: none;
}
.shimmer:hover::after { transform: translateX(100%); }

/* Process step connecting line draw */
.process-line {
    background-image: linear-gradient(90deg, rgba(0,72,119,0.25) 0%, rgba(0,72,119,0.25) 100%);
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: 0 50%;
    transition: background-size 1.2s ease;
}
.process-line.is-visible { background-size: 100% 2px; }

/* Sticky mobile CTA bar */
#mobile-sticky-cta {
    transform: translateY(120%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#mobile-sticky-cta.is-visible { transform: translateY(0); }

/* Avoid content hidden behind sticky mobile CTA */
@media (max-width: 767.98px) {
    body { padding-bottom: 80px; }
}

/* ===== Responsive Heading Scaling =====
 * Die Tailwind-Config definiert text-display-lg/headline-lg/headline-md
 * als feste Pixelwerte (48/32/24px) ohne Breakpoint-Varianten. Auf
 * Smartphones führt das zu abgeschnittenen Überschriften wie
 * "Umzugsunternehmen". Hier werden die Größen für schmale Viewports
 * herunterskaliert und Wort-Umbruch für lange Komposita aktiviert.
 */

/* Tablet (bis 1024px) */
@media (max-width: 1023.98px) {
    .text-display-lg {
        font-size: 40px !important;
        line-height: 48px !important;
    }
}

/* Mobil quer / kleine Tablets (bis 768px) */
@media (max-width: 767.98px) {
    .text-display-lg {
        font-size: 34px !important;
        line-height: 42px !important;
        letter-spacing: -0.02em !important;
    }
    .text-headline-lg {
        font-size: 26px !important;
        line-height: 34px !important;
    }
    .text-headline-md {
        font-size: 20px !important;
        line-height: 28px !important;
    }
}

/* Smartphone (bis 480px) */
@media (max-width: 479.98px) {
    .text-display-lg {
        font-size: 28px !important;
        line-height: 36px !important;
    }
    .text-headline-lg {
        font-size: 22px !important;
        line-height: 30px !important;
    }
    .text-headline-md {
        font-size: 18px !important;
        line-height: 26px !important;
    }
}

/* Lange deutsche Komposita (Umzugsunternehmen, Entrümpelungen, …)
 * sauber umbrechen, statt aus dem Container zu fließen. */
.text-display-lg,
.text-headline-lg,
.text-headline-md {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* Padding der Seitenränder auf kleinen Geräten verringern,
 * damit Überschriften mehr Platz bekommen (Tailwind px-margin-x = 32px). */
@media (max-width: 479.98px) {
    .px-margin-x {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Hero-Section: feste min-h-[921px] ist auf Mobilgeräten zu hoch und
 * schiebt CTA-Buttons unter den Fold. Auf Smartphones flexibler machen. */
@media (max-width: 767.98px) {
    section.min-h-\[921px\] {
        min-height: auto !important;
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }
}