/*
Theme Name: Slowneasy Custom
Author: Bams Design
Description: Maßgeschneidertes Theme nach Nicepage-Vorlage (1:1 Nachbau).
Version: 1.1
*/

body { 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    margin: 0; 
    padding: 0; 
    background: #fff; 
    color: #333; 
}

.slowneasy-container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 20px; 
}

/* Überschriften im eleganten Serif-Stil (Georgia) wie im Screenshot */
h1, h2, h3, .slowneasy-title-georgia { 
    font-family: Georgia, 'Times New Roman', serif; 
    font-weight: 700; 
}

/* Entfernt die Aufzählungszeichen im Standard-Menü */
.slowneasy-nav li { list-style: none; display: inline-block; }

/* =========================================
   HERO BEREICH & KARTEN OVERLAY
   ========================================= */
.slowneasy-hero-bg { 
    width: 100%; 
    height: 75vh; 
    background-size: cover; 
    background-position: center; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    position: relative;
}

.slowneasy-hero-title { 
    color: #fff; 
    font-size: clamp(2rem, 6vw, 4.5rem); 
    font-weight: 900; 
    text-transform: uppercase; 
    text-shadow: 0 5px 20px rgba(0,0,0,0.4); 
    text-align: center;
}

/* Die 4 weißen Karten, die ins Bild ragen */
.slowneasy-card-row { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; 
    margin-top: -150px; /* Zieht die Karten ins Bild hoch */
    position: relative; 
    z-index: 10; 
    padding-bottom: 60px;
}

.slowneasy-card { 
    background: #fff; 
    border-radius: 40px; 
    padding: 45px 25px; 
    text-align: center; 
    box-shadow: 0 15px 50px rgba(0,0,0,0.08); 
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.slowneasy-card:hover { transform: translateY(-10px); border-color: #84a1b5; }

/* Kreis-Icons in den Karten */
.slowneasy-card-icon { 
    width: 110px; 
    height: 110px; 
    border: 1.5px solid #84a1b5; 
    border-radius: 50%; 
    margin: 0 auto 30px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 20px;
}

.slowneasy-card h3 { font-size: 1.5rem; margin-bottom: 15px; color: #000; }
.slowneasy-card p { color: #666; font-size: 0.95rem; line-height: 1.7; margin-bottom: 25px; }

/* Dezente Links unter den Karten-Texten */
.slowneasy-card-link { 
    text-decoration: none; 
    color: #000; 
    font-weight: bold; 
    text-transform: uppercase; 
    font-size: 0.8rem; 
    letter-spacing: 1px; 
    border-bottom: 2px solid #84a1b5; 
    padding-bottom: 4px;
    transition: 0.3s;
}
.slowneasy-card-link:hover { color: #84a1b5; }

/* =========================================
   BLOCK STYLES (GUTENBERG)
   ========================================= */
.slowneasy-section { padding: 80px 20px; }
.slowneasy-section-light { background: #f4f7f9; padding: 100px 40px; border-radius: 60px; margin: 40px 0; }
.slowneasy-bg-dark { background: #263238; color: #fff; border-radius: 60px; padding: 80px 40px; }

/* Buttons im Screenshot-Stil */
.wp-block-button__link.slowneasy-btn, .slowneasy-btn, .slowneasy-footer-btn { 
    background: #84a1b5 !important; 
    color: #fff !important; 
    padding: 16px 35px !important; 
    border-radius: 50px !important; 
    text-transform: uppercase; 
    font-weight: 800; 
    letter-spacing: 1px; 
    transition: 0.3s; 
    border: none !important;
}
.wp-block-button__link.slowneasy-btn:hover, .slowneasy-btn:hover { background: #000 !important; transform: scale(1.05); }

/* FAQ Boxen */
.slowneasy-faq-item { background: #fff; border-radius: 30px; padding: 30px; margin-bottom: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.03); border: 1px solid #eee; }

/* Responsive Korrekturen */
@media (max-width: 1024px) {
    .slowneasy-card-row { grid-template-columns: repeat(2, 1fr); margin-top: -80px; }
}
@media (max-width: 600px) {
    .slowneasy-card-row { grid-template-columns: 1fr; margin-top: -50px; }
    .slowneasy-hero-title { font-size: 2.2rem; }
}

/* =========================================
   NEU: FEINERE & KLEINERE KREIS-ICONS
   ========================================= */
.slowneasy-card-icon { 
    width: 65px;         /* DEUTLICH KLEINER (vorher 110px) */
    height: 65px;        /* DEUTLICH KLEINER (vorher 110px) */
    border: 1px solid #84a1b5; /* FEINERER RAHMEN (vorher 1.5px) */
    border-radius: 50%; 
    margin: 0 auto 20px; /* ETWAS WENIGER ABSTAND (vorher 30px) */
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 10px;       /* DEZENTERER INNENABSTAND (vorher 20px) */
    box-sizing: border-box; /* Verhindert, dass das Padding die Größe beeinflusst */
}

/* Sorgt dafür, dass die Grafik im Kreis perfekt skaliert */
.slowneasy-card-icon img { 
    max-width: 100%; 
    height: auto; 
    display: block; 
}


 .slowneasy-footer {

    /* Setzt das neue Muster als Hintergrundbild */

    background-image: url('https://slowneasy.ch/wp-content/uploads/2026/03/willy_bg.png');

    

    /* Sorgt dafür, dass sich das Bild endlos in alle Richtungen wiederholt */

    background-repeat: repeat;

    

    /* Optional: Steuert die Größe der einzelnen Kacheln. 

       Passe den Wert an, wenn dir das Muster zu groß oder zu klein ist */

    background-size: 100px; 

    

    /* Die dunkle Hintergrundfarbe als Fallback, falls das Bild mal lädt */

    background-color: #1b3320; 

    

    /* Sichert ab, dass der Text auf dem dunklen Grund lesbar bleibt */

    color: #ffffff; 

}