/* ============================================================
   Premium-Layer fuer av-sanierung.de
   Wird ZUSAETZLICH zu styles.css geladen — uebersteuert gezielt
   Stellen die hochwertiger wirken sollen. Trennung von styles.css
   damit ich rückwärtskompatibel bleibe und der ursprüngliche Layout-
   Code nicht aufgepflegt werden muss.
   ============================================================ */

/* Premium-Typografie: Inter ist heute fast Standard fuer "premium"
   Webseiten — kostenlos, lesbar, breite Browser-Unterstuetzung. */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';  /* feinere Glyph-Varianten */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.011em;  /* leicht enger fuer Premium-Look */
}

/* Headlines: gewichtigerer Stil, engerer Letter-Spacing */
.hero-h1,
.section-title,
h1, h2, h3 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.hero-h1 {
    font-weight: 800;
    letter-spacing: -0.035em;
}

.section-title {
    /* Etwas mehr Atmen, kein Standard-Look */
    margin-bottom: 3rem;
    font-size: clamp(1.9rem, 4.5vw, 2.6rem);
}

/* Premium-Farb- und Spacing-Variablen — bauen auf den existierenden auf */
:root {
    --accent-metal: #c7ccd4;      /* kuehler Metall-Akzent aus dem neuen Verhoeven-Branding */
    --accent-emerald: #10b981;    /* Erfolg/Trust */
    --premium-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.24);
    --premium-shadow-sm: 0 8px 22px -8px rgba(0, 0, 0, 0.24);
    --premium-shadow-glow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 8px 24px -8px rgba(0, 0, 0, 0.16);
}

/* ============================================================
   Scroll-Reveal-Animationen
   Elemente mit [data-reveal] starten unsichtbar + leicht verschoben,
   das premium.js fügt .is-visible hinzu wenn sie in den Viewport
   scrollen. "Subtile" Anims — nichts wirbelt, alles ruhig.
   ============================================================ */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    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);
}

/* Stagger-Variante: mehrere Children faden nacheinander ein
   (data-reveal-stagger am Container, einzelne Kinder werden vom
   JS mit incrementaler transition-delay versehen). */
[data-reveal-stagger].is-visible > * {
    animation: revealStagger 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes revealStagger {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* User mit prefers-reduced-motion: KEIN Anim, sofort sichtbar.
   Wichtig fuer Barrierefreiheit + langsamer wirkende Geraete. */
@media (prefers-reduced-motion: reduce) {
    [data-reveal],
    [data-reveal-stagger] > *,
    .hero::before,
    .hero-logo-base,
    .hero-logo-e-accent,
    .hero-service-badges span,
    .hero-service-badges span::before {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

}

/* ============================================================
   Sticky Floating-CTA (Telefon + WhatsApp, unten rechts)
   Sichtbar nach erstem Scroll, immer in Daumen-Reichweite auf Mobile.
   Verschwindet beim Scrollen ueber die Kontakt-Sektion (sinnlos dort).
   ============================================================ */
.floating-cta {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.floating-cta.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.floating-cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.floating-cta-button:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.35);
}

.floating-cta-button svg {
    width: 26px;
    height: 26px;
}

.floating-cta-tel {
    background: #000;
}

.floating-cta-whatsapp {
    background: #25D366;
}

/* Auf Mobile etwas kleiner positionieren damit Buttons nicht ueber
   System-UI hängen. */
@media (max-width: 480px) {
    .floating-cta {
        bottom: 1rem;
        right: 1rem;
    }
    .floating-cta-button {
        width: 52px;
        height: 52px;
    }
}

/* ============================================================
   Hero-Verfeinerung: bessere Typo-Hierarchie + sanfteres Overlay
   ============================================================ */
.hero-h1 {
    font-size: clamp(2rem, 5.5vw, 3.5rem);
    margin-bottom: 1.25rem;
}

.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.18rem);
    line-height: 1.5;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: -0.005em;
}

.cta-button {
    background: #ffffff;
    color: #090909 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
    box-shadow:
        0 8px 20px -14px rgba(0, 0, 0, 0.9),
        0 0 0 1px rgba(58, 167, 255, 0.16);
    font-weight: 800;
    letter-spacing: -0.01em;
    border: none;
}

.cta-button:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
    box-shadow:
        0 12px 24px -14px rgba(0, 0, 0, 0.9),
        0 0 0 1px rgba(58, 167, 255, 0.38);
}

/* ============================================================
   Section-Polish: konsistenteres Spacing zwischen Sections
   ============================================================ */
section {
    padding-top: clamp(3rem, 7vw, 5rem);
    padding-bottom: clamp(3rem, 7vw, 5rem);
}

.hero {
    padding-top: 0;  /* Hero ist full-bleed, nicht ueberschreiben */
}

/* ============================================================
   Referenz-Bilder: Hover-Heben fuer Premium-Gefuehl
   ============================================================ */
.referenz-image-card {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.referenz-image-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--premium-shadow);
}