/*
Theme Name: Ci-Co 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; 
}

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

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

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

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

.cico-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 */
.cico-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;
}

.cico-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;
}

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

/* Kreis-Icons in den Karten */
.cico-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;
}

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

/* Dezente Links unter den Karten-Texten */
.cico-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;
}
.cico-card-link:hover { color: #84a1b5; }

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

/* Buttons im Screenshot-Stil */
.wp-block-button__link.cico-btn, .cico-btn, .cico-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.cico-btn:hover, .cico-btn:hover { background: #000 !important; transform: scale(1.05); }

/* FAQ Boxen */
.cico-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) {
    .cico-card-row { grid-template-columns: repeat(2, 1fr); margin-top: -80px; }
}
@media (max-width: 600px) {
    .cico-card-row { grid-template-columns: 1fr; margin-top: -50px; }
    .cico-hero-title { font-size: 2.2rem; }
}



/* =========================================
   NEU: FEINERE & KLEINERE KREIS-ICONS
   ========================================= */
.cico-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 */
.cico-card-icon img { 
    max-width: 100%; 
    height: auto; 
    display: block; 
}