/*###############################
###
###     RESPONSIVE STYLES
###     BASED ON: HTML, JS, CSS 
###     AUTHOR: Benjamin Benenwitz
###
###
###       ██████╗  ▀█
###       ██╔══██╗ █▄
###       ██████╦╝
###       ██╔══██╗
###       ██████╦╝
###       ╚═════╝
###
###
#################################*/

/* Inhaltsverzeichnis
   17. RESPONSIVE DESIGN siehe responsive.css
      17.1 Desktop small (bis 1200px)
      17.2 Tablet quer (bis 900px)
      17.3 Tablet hoch (bis 690px)
      17.4 Mobile (bis 490px)
*/

/* ==============================
   17.1 Desktop small (bis 1200px)
   ============================== */
@media (max-width: 1200px) {

    /* ---------- hero section ---------- */
    .hero-caption h1 {
        font-size: 3rem;
    }

    .hero-caption p {
        font-size: 1.5rem;
    }

    /* ---------- services section ---------- */
    .services {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 1.4rem 1.4rem;
        padding: var(--section-pad-m);
        justify-items: center;
        align-items: start;
    }

    #services-heading {
        grid-column: 1 / span 2;
        justify-self: center;
        font-size: 2rem;
        margin-bottom: 3rem;
    }

    .service-card h3 {
        font-size: 1.7rem;
    }

    .service-card p {
        font-size: 1.5rem;
    }

    .services .service-card:nth-child(2) {
        grid-row: 2;
        grid-column: 1;
    }

    .services .service-card:nth-child(3) {
        grid-row: 2;
        grid-column: 2;
    }

    .services .service-card:nth-child(4) {
        grid-row: 3;
        grid-column: 1 / span 2;
        justify-self: center;
        width: 70%;
        min-width: 220px;
        max-width: 350px;
    }

    /* ---------- pflegekasse section ---------- */
    .pflegekasse-section {
        padding: var(--section-pad-m);
    }

    .pflegekasse-flex {
        flex-direction: column;
        gap: 1.5rem;
        min-height: unset;
    }

    .pflegekasse-left,
    .pflegekasse-right {
        border-radius: 16px;
        min-width: unset;
        padding: 2rem 1.2rem;
        max-width: 700px;
    }

    .pflegekasse-right {
        margin-top: 0;
    }

    .pflegekasse-left h2,
    .pflegekasse-right h2 {
        font-size: 2rem;
    }

    .pflegekasse-left p,
    .pflegekasse-right p,
    .pflegekasse-list,
    .pflegekasse-benefit {
        font-size: 1.5rem;
    }

    /* ---------- about section ---------- */
    .about {
        padding: var(--section-pad-m);
    }

    .about-flex {
        gap: 2rem;
        flex-direction: column;
    }

    .about-masonry {
        flex-direction: row;
        gap: 0.6rem;
        min-height: 120px;
        margin-bottom: 0.5rem;
    }

    .about-teaser {
        width: 120px;
        height: 240px;
    }

    .about-text {
        gap: 1.2rem;
    }

    #about-heading {
        font-size: 2rem;
        margin-bottom: 2rem;
    }

    .about-block p {
        font-size: 1.5rem;
    }

    /* ---------- teaser section ---------- */
    .teaser {
        padding: var(--section-pad-m);
    }

    .teaser .container {
        gap: 2rem;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .teaser-card {
        padding: 1.5rem;
        font-size: 1.5rem;
    }

    .teaser-card h3 {
        font-size: 1.7rem;
    }

    /* ---------- preise section ---------- */
    .preise-section-design {
        padding: var(--section-pad-m);
    }

    .preise-card-container {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .preis-box {
        width: 90vw;
        max-width: 500px;
        margin: 20px 0;
        height: auto;
        min-height: 420px;
    }

    #preise-heading {
        font-size: 2rem;
    }

    .preis-content {
        padding: 2rem;
        font-size: 1.5rem;
    }

    .preis-content h3 {
        font-size: 1.7rem;
    }

    /* ---------- faq section ---------- */
    #faq {
        padding: var(--section-pad-m);
    }

    .faq-wrapper {
        max-width: 800px;
        margin: 0 auto;
    }

    #faq-heading {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }

    .faq details {
        width: 90%;
        min-width: 90%;
        max-width: 95%;
    }

    .faq-wrapper p,
    .faq details p {
        font-size: 1.5rem;
    }

    /* ----------- 404 ----------------- */
    .sections-wrapper {
        grid-template-columns: 1fr;
        padding: 60px 5%;
    }
}

/* ==============================
   17.2 Tablet quer (bis 900px)
   ============================== */
@media (max-width: 900px) {

    /* hero section */
    .hero-caption h1 {
        font-size: 2rem;
    }

    .hero-caption p {
        font-size: 1rem;
    }

    /* services section */
    .services {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.3rem;
        padding: var(--section-pad-m);
    }

    #services-heading {
        font-size: 2rem;
        align-self: center;
        text-align: center;
    }

    .service-card {
        width: 100%;
        max-width: 400px;
        min-width: 0;
        margin-bottom: 3rem;
    }

    .service-card h3 {
        font-size: 1.5rem;
    }

    .service-card p {
        font-size: 1rem;
    }

    /* pflegekasse section */
    .pflegekasse-flex {
        gap: 1rem;
    }

    .pflegekasse-left,
    .pflegekasse-right {
        padding: 2rem;
        font-size: 1rem;
        max-width: 480px;
    }

    .pflegekasse-left h2,
    .pflegekasse-right h2 {
        font-size: 2rem;
    }

    .pflegekasse-left p,
    .pflegekasse-right p,
    .pflegekasse-list,
    .pflegekasse-benefit {
        font-size: 1rem;
    }

    /* about section */
    .about-flex {
        gap: 1.2rem;
    }

    .about-masonry {
        gap: 0.3rem;
    }

    .about-teaser {
        width: 80px;
        height: 130px;
    }

    #about-heading {
        font-size: 2rem;
    }

    .about-block p {
        font-size: 1rem;
    }

    /* teaser section */
    .teaser .container {
        grid-template-columns: 1fr 1fr;
        gap: 1.2rem;
    }

    .teaser-card {
        padding: 1.5rem;
        font-size: 1rem;
    }

    .teaser-card h3 {
        font-size: 1.5rem;
    }

    /* preise section */
    #preise-heading {
        font-size: 2rem;
    }

    .preis-content {
        font-size: 1rem;
    }

    .preis-content h3 {
        font-size: 1.5rem;
    }

    /* faq section */
    #faq-heading {
        font-size: 2rem;
    }

    .faq-wrapper p,
    .faq details p {
        font-size: 1rem;
    }
}

/* ==============================
   17.3 Tablet hoch (bis 690px)
   ============================== */
@media (max-width: 690px) {

    /* hero section */
    .hero-caption {
        top: 54%;
    }

    .hero-caption h1 {
        font-size: 2rem;
        white-space: normal;
    }

    .hero-caption p {
        font-size: 1rem;
        white-space: normal;
    }

    .hero-caption .btn-wrapper {
        flex-direction: column;
        gap: 0.5rem;
    }

    /* services section */
    #services-heading {
        font-size: 1.5rem;
    }

    .service-card h3 {
        font-size: 1.5rem;
    }

    .service-card p {
        font-size: 1rem;
    }

    /* pflegekasse section */
    .pflegekasse-flex {
        gap: 0.7rem;
    }

    .pflegekasse-left,
    .pflegekasse-right {
        padding: 1rem 1.5rem;
        font-size: 1rem;
        max-width: 99vw;
    }

    .pflegekasse-left h2,
    .pflegekasse-right h2 {
        font-size: 1.5rem;
    }

    .pflegekasse-left p,
    .pflegekasse-right p,
    .pflegekasse-list,
    .pflegekasse-benefit {
        font-size: 1rem;
    }

    /* about section */
    .about-flex {
        gap: 0.8rem;
    }

    .about-masonry {
        flex-direction: row;
        gap: 0.2rem;
        margin-bottom: 0.2rem;
    }

    .about-teaser {
        width: 52px;
        height: 90px;
    }

    #about-heading {
        font-size: 1.5rem;
        margin-bottom: 0.8rem;
    }

    .about-block p {
        font-size: 1rem;
    }

    /* teaser section */
    .teaser .container {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    .teaser-card {
        font-size: 1rem;
    }

    .teaser-card h3 {
        font-size: 1.5rem;
    }

    /* preise section */
    #preise-heading {
        font-size: 1.5rem;
    }

    .preis-content {
        font-size: 1rem;
    }

    .preis-content h3 {
        font-size: 1.5rem;
    }

    /* faq section */
    #faq-heading {
        font-size: 1.5rem;
    }

    .faq-wrapper p,
    .faq details p {
        font-size: 1rem;
    }

    .faq-hero {
        padding: 10rem 1rem;
    }

    .category-title {
        font-size: 1.5rem;
    }

    .faq-item summary {
        padding: 20px;
        font-size: 1.05rem;
    }

    .faq-content {
        padding: 0 20px 20px;
    }

    /* ----------- 404 ----------------- */
    .btn-wrapper {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .search-input-group {
        flex-direction: column;
    }

    .search-form .btn {
        padding: 14px;
    }

    /* ----------- thank-you ----------------- */
    .thank-you-section {
        padding: 12rem 1rem;
    }

    .thank-you-card {
        padding: 40px 20px;
    }

    .btn-container-ty {
        flex-direction: column;
    }

    .btn-container-ty .btn-outline-primary,
    .btn-container-ty .btn-to-outline-primary {
        width: 100%;
    }

    /* ----------- maintenance ----------------- */
    .maintenance-section {
        padding: 12rem 1rem;
    }

    .maintenance-card {
        padding: 40px 20px;
    }

    .maintenance-icon {
        font-size: 4rem;
    }
}

/* ==============================
   17.4 Mobile (bis 490px, inkl. Micro Mobile ≤270px)
   ============================== */
@media (max-width: 490px) {

    /* hero section */
    .hero-caption {
        top: 46%;
        left: 50%;
        width: 96vw;
        padding: 0.2rem 0.2rem;
        text-align: center;
    }

    .hero-caption h1 {
        font-size: 2rem;
        white-space: normal;
    }

    .hero-caption p {
        font-size: 1rem;
    }

    /* services section */
    .services {
        grid-template-columns: 1fr;
        gap: 0.4rem;
        padding: var(--section-pad-m);
    }

    #services-heading {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }

    .service-card h3 {
        font-size: 1.5rem;
    }

    .service-card p {
        font-size: 1rem;
    }

    /* pflegekasse section */
    .pflegekasse-section {
        padding: var(--section-pad-m);
    }

    .pflegekasse-left,
    .pflegekasse-right {
        padding: 2rem;
        font-size: 1rem;
        max-width: 100vw;
    }

    .pflegekasse-left h2,
    .pflegekasse-right h2 {
        font-size: 1.5rem;
    }

    .pflegekasse-left p,
    .pflegekasse-right p,
    .pflegekasse-list,
    .pflegekasse-benefit {
        font-size: 1rem;
    }

    /* about section */
    .about-flex {
        gap: 0.4rem;
    }

    .about-masonry {
        gap: 0.09rem;
    }

    .about-teaser {
        width: 65px;
        height: 125px;
        margin-bottom: 2rem;
    }

    #about-heading {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }

    .about-block p {
        font-size: 1rem;
    }

    /* teaser section */
    .teaser .container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .teaser-card {
        font-size: 1rem;
    }

    .teaser-card h3 {
        font-size: 1.5rem;
    }

    /* preise section */
    #preise-heading {
        font-size: 1.5rem;
        text-align: center;
    }

    .preis-content {
        font-size: 1rem;
    }

    .preis-content h3 {
        font-size: 1.5rem;
    }

    .kosten-anschlag {
        line-height: 2;
    }

    /* faq section */
    #faq-heading {
        font-size: 1.5rem;
    }

    .faq-wrapper p,
    .faq details p {
        font-size: 1rem;
    }

    .agb h1,
    .dtz-headline {
        font-size: 1.5rem;
        margin-bottom: 1.2rem;
    }

    .agb h2,
    h2 {
        font-size: 1.2rem;
        margin-top: 1.2rem;
    }
}