/* zusatz CSS: FAQ Seite */

/* ===================== DESKTOP ===================== */


/* Abstand nach oben (damit die Sprungmarken nicht oben am Rand "kleben") */
[id] {
    scroll-margin-top: 40px; /* 👈 Stellschraube */
}




/* Trennlinie */
.horiline-faq     { 
    margin:50px auto; 
    text-align:center; 
    border:solid #E6DAC9 1px; 

     /* display:none;      ⚠️ AUSGEBLENDET */
}




/* === FAQ - Block (je ein Beitrag) === */
.faq-block {
    padding: 20px;
    border-radius: 8px;
    margin-top: 0;          /* 👈 kein Abstand nach oben */
    margin-bottom: 1rem;    /* 👈 Abstand NACH UNTEN */

    border: 1px solid #e0e8e0;      /* ganz leichte Kontur */
   /*  border-top: 3px solid #ddd;   */     /* Kontur für 3D Effekt */
    border-bottom: 3px solid #ddd;        /* Kontur für 3D Effekt */
}




/* Überschriften ROT */
.faq-block h3 {
    text-align: left;
    margin-top: 0;            /* kein Abstand nach oben */
    color: #880000;
}



/* Das typische FAQ Bild */
.faq-block img.faq-bild {
    width:190px;
    height: 132px;

    float:right; 
    margin:0.2rem 0 0 0.7rem; 
    box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
    border-radius: 5px;
    /*  shape-outside: inset(0 0 8px 0); */ /* DIE MAGIE: besserer Umfluss*/

}

/* die Block Hintergrund-Farben */
/* ============================================
   FAQ Block – Farbvarianten (helle Pastelltöne)
   ============================================ */

/* Grün (hell) */
.faq-gruen { background: #f3f8f3; border-color: #dce8dc; }

/* Grün (etwas kräftiger) */
.faq-gruen2 { background: #e7f3e7; border-color: #c9e0c9; }

/* Gelb */
.faq-gelb { background: #fff9e5; border-color: #f0e4b8; }

/* Rot */
.faq-rot { background: #fdeeee; border-color: #f3c8c8; }

/* Neutral hell */
.faq-neutral { background: #f7f7f7; border-color: #e5e5e5; }

/* Neutral etwas dunkler */
.faq-neutral2 { background: #f1f1f1; border-color: #d2d2d2; }

/* Beige / Natur – warm, Hof-Stil */
.faq-beige { background: #faf5e8; border-color: #e8ddc4; }

/* Braun – dezent, erdig */
.faq-braun { background: #f4ede6; border-color: #e2d4c8; }

/* Lila – sanft, nicht kitschig */
.faq-lila { background: #f5f0fa; border-color: #e2d8ef; }

/* Blau – ruhig, sachlich */
.faq-blau { background: #eef4fb; border-color: #d4e2f3; }

/* Orange – warm, freundlich */
.faq-orange { background: #fff3e8; border-color: #f5dcc2; }

/* Rosa – sehr dezent */
.faq-rosa { background: #fceff3; border-color: #e8d3db; }








/* ============================================
   ​🟥 FAQ – Trenner (Gradient-Linie + Icon in Mitte)
   ============================================ */

.faq-divider {
    display: flex;                 /* Linie + Icon nebeneinander */
    align-items: center;           /* Icon vertikal mittig */
    justify-content: center;       /* Icon horizontal mittig */
    margin: 2.5rem 0;              /* Abstand oben/unten */
    opacity: 0.6;                  /* 👉 Gesamt-Abschwächung */
}




.faq-divider::before,
.faq-divider::after {
    content: "";
    flex: 1;                       /* Linie füllt links/rechts */
    height: 2px;                   /* 👉 Linienstärke */
    background: linear-gradient(
        to right,
        transparent,
        #ccc
    );
    border-radius: 5px;            /* 👉 weiche Enden */
}

.faq-divider::after {
    background: linear-gradient(
        to left,
        transparent,
        #ccc
    );
}

/* ICON */
.faq-divider span {
    margin: 0 1rem;                /* 👉 Abstand Icon ↔ Linie */
    font-size: 1.5rem;             /* 👉 Icon-Größe */
    filter: grayscale(70%);        /* 👉 entsättigt */
    opacity: 0.3;                  /* 👉 Icon dezent */
}

/* ICON oberstes & unterstes(?) */
.faq-divider.top span {
    margin: 0 1rem;                /* 👉 Abstand Icon ↔ Linie */
    font-size: 2.5rem;             /* 👉 Icon-Größe >> GRÖßER */
    line-height: 1px;
    filter: grayscale(70%);        /* 👉 entsättigt */
    opacity: 0.25;                 /* 👉 Icon etwas dezenter */
}






/* ========= Hervorhebung eines Textes =========== */
.label-style {
   /*  background: #f3e9d8; */  /* warmes, dezentes Papier-Beige */
   /*  color:#661100; */        /* ⚠️ Ausgeblendet, da jetzt mit Utility Klassen (.bg-beige etc) ergänzt wird */
    padding: 1px 8px;
   /*  line-height: 1.9;  */    /* bisschen luft zur nächsten Zeile */
    border-radius: 5px;
    font-weight: 800;           /* fett */
    font-size: 0.8em;           /* 👉 Schriftgröße */ 
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

/* Hintergrund */
.bg-gruenWA   { background: #1fb456; color: #ffffff; } /* WhatsApp Grün */









/* =================================== MOBILE ================================== */
/* #region 🔴 ======================== MOBILE ================================== */

@media (max-width: 1000px) {





    .faq-block {
        padding: 20px;
        border-radius: 8px;
        /* margin-top: 0;  */         /* 👈 kein Abstand nach oben */
        /* margin-bottom: 0rem;   */  /* 👈 Abstand NACH UNTEN */
        border: 1px solid #e0e8e0;      /* ganz leichte Kontur */

    /*  border-top: 3px solid #ddd;   */     /* Kontur für 3D Effekt */
        border-bottom: 3px solid #ddd;        /* Kontur für 3D Effekt */
    }


    .faq-block h3 {
            font-size: 2.5rem;
    }


    .faq-block img.faq-bild {
        width:375px;
        height: 270px;

        float:right; 
        margin:0.2rem 0 0 1.3rem; 
        box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
        border-radius: 10px;
        /*  shape-outside: inset(0 0 8px 0); */ /* DIE MAGIE: besserer Umfluss*/

}




/* ===========================================================
   ​🟥 FAQ – Trenner (Gradient-Linie + Icon in Mitte) >> MOBILE
   =========================================================== */
    .faq-divider {
        margin: 3rem 0;          /* 👉 etwas kompakter */
        opacity: 0.5;            /* 👉 Gesamt etwas dezenter */
    }

    .faq-divider::before,
    .faq-divider::after {
        height: 2px;             /* 👉 Linienstärke */
        border-radius: 3px;      /* 👉 weicher, aber dezenter */
    }

    /* ICON */
    .faq-divider span {
        margin: 0 3rem;        /* 👉 Abstand Icon ↔ Linie */
        font-size: 3.3rem;       /* 👉 Icon minimal kleiner */
        opacity: 0.3;           /* 👉 noch dezenter */
        filter: grayscale(80%);  /* 👉 etwas mehr entsättigt */
    }

    /* ICON oberstes & unterstes(?) */
    .faq-divider.top span {
        margin: 0 3rem;                /* 👉 Abstand Icon ↔ Linie */
        font-size: 5.5rem;             /* 👉 Icon-Größe >> GRÖßER */
        line-height: 3rem;
    }







}


/* #endregion */