/* #region 🟩 GLOBAL: BODY + BASISLAYOUT */

/* -------------------------------------------------------
   0) BODY – Grundlayout + Verlauf
------------------------------------------------------- */
body {
  font-family: Arial, sans-serif;
  font-size: 1rem;
  color: #441100;

  background-color: #fdedba;
  background-image: linear-gradient(
    to bottom,
    #fffdf0 0px,
    #fffdf0 140px,
    #fdedba 240px,
    #fdedba 100%
  );
  background-repeat: no-repeat;
}

/* -------------------------------------------------------
   1) MENÜS AUSBLENDEN
------------------------------------------------------- */
.huho-sidebar /*, .huho-quermenu, */ {
  display: none;
}

#hamburger {
  background: none;
  backdrop-filter: none;
  box-shadow: none;
}

.huho-quermenu a {
  color: #aa8877;   /* bb9988 */
  transition: color 0.4s ease, background-color 0.4s ease; /* 👉 einblenden */
}

.huho-quermenu a:hover {
  color: #ffffff;
  background: #aa8877;
}

/* #endregion */



/* #region 🟦 LAYOUT: SEITEN-UMSCHLAG + INHALTSBEREICH */

/* -------------------------------------------------------
   2) SEITEN-UMSCHLAG / PAPIER + FREISTELL-SCHATTEN
------------------------------------------------------- */
.site-wrapper {
  position: relative;
  margin: 10px 0 10px;   /* 👉 Abstand zum Body */
  padding: 0;

  border: none;
  box-shadow: none;
  border-radius: 26px;   /* 👉 Rundung */

  background: none;
  filter: brightness(1.2) saturate(0.99); /* 👉 Papier bleichen >> bleicht Bild leider mit*/
}

/* Papier */
.site-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;

  background: url(/images/deko/Blatt_PapierALT01a_frei_hoch.png)
              center/100% 100% no-repeat;
  filter: drop-shadow(0 25px 35px rgba(0,0,0,0.35));
  border-radius: 26px;
  z-index: -1;
}

/* -------------------------------------------------------
   3) INHALTSBEREICH
------------------------------------------------------- */
.site-content {
  margin-top: 0px;                  /* 👉 Abstand unter Headline >> mit PADDING regeln(!)*/
  padding: 50px 100px 50px;         /* 👉 Innenabstände >> Textbreite + unterer Abstand */
}

/* #endregion */



/* #region 🟨 TYPOGRAFIE */

/* -------------------------------------------------------
   5) 🟨 TYPOGRAFIE
------------------------------------------------------- */

          /* ⚠️⚠️⚠️ AUFGRUND Grafik-Logo NICHT MEHR BENÖTIGT ⚠️⚠️⚠️ */
          h1.maerchenschrift {
            margin-top: 1rem;
            font-family: 'Great Vibes', cursive;
            line-height: 1;
            font-size: 5.4rem;
            margin-bottom: 0.1rem;
            text-align: center;
            color: #6a3f1f;     /* 44110022 dezent mit Transparenz(!!) >> Honig 8a653c */
          }

          p.maerchenschrift {
            font-family: 'Georgia', serif;
            margin-bottom: 2rem;         /* 👉 Anstand zum Märchen-Text */
            text-align: center;
            font-size: 2.0rem;
            line-height: 1.0;
            letter-spacing: 0.3rem;
            color: #6a3f1f;         /* 44110033 dezent mit Transparenz(!!) */
          }
          /* ⚠️⚠️⚠️ AUFGRUND Grafik-Logo NICHT MEHR BENÖTIGT ⚠️⚠️⚠️ */




h2 {
  font-family: 'Caveat', cursive;
  line-height: 1;
  font-size: 3.2rem;
  text-align: center;
  margin-bottom: 1rem;
}

p {
  font-family: 'Caveat', cursive;
  margin-bottom: 1.45rem;         /* 👉 viel Platz zwischen den Märchen-Absätzen */
  font-size: 1.9rem;
  line-height: 1.3;
}

b {
  color:#660000;
}

/* #endregion */



/* #region Ⓜ️ LOGO - Überschrift */

.maerchen-logo {
    display: block;   /* 👈 wichtig, weil "label" inline ist */
    cursor: pointer;  /* 👈 damit klar ist: klickbar */

    width: 70%;          /* Größe anpassen */
   /* height: 340px;         /* Höhe anpassen */
    aspect-ratio: 2.7 / 1;   /* Verhältnis deines Logos (bei 1050px / 390px ) */
    margin: 0 auto;

    background-image: url("../images/content/COPI_Logo_Maerchen&Sagen_03a_trans.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: calc(50% - 10px) center; /* etwas nach links aus der Mitte */

    /* Farbton beeinflussen */
    filter:
        sepia(1)
        hue-rotate(-20deg)
        saturate(10)
        brightness(0.25)
        drop-shadow(0 0 2px rgba(255,255,255,0.9))
        drop-shadow(0 0 12px rgba(0,0,0,0.3));
        opacity: 0.90;
      }   



/* #endregion */



/* #region 🟧 BILDER: MÄRCHENBILD + HOVER-TAUSCH */

/* -------------------------------------------------------
   4) 🟩 BILD
------------------------------------------------------- */

/* Wrapper übernimmt den Float – behält seine Größe durch das erste Bild */
.maerchenbild-wrap {
  float: right;
  margin: 0.2rem 0 0 1.2rem;
  position: relative;

  /* Feste Größe – Container springt nicht mehr */
  width: 430px;
  height: 310px;
}

/* Bilder im Wrapper – füllen den Container komplett aus */
.maerchenbild-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
  border-radius: 7px;
  filter: brightness(1.0) saturate(0.6);      /* Bild dezenter durch entsättigen */
  transition: opacity 0.4s ease;
}

/* Erstes Bild */
.maerchenbild {
  opacity: 1;
}

/* Zweites Bild */
.maerchenbild-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

/* Hover → Bilder tauschen */
.maerchen-bereich:has(.image-swap:hover) .maerchenbild {
  opacity: 0;
}
.maerchen-bereich:has(.image-swap:hover) .maerchenbild-hover {
  opacity: 1;
}

/* #endregion */



/* #region 🟫 ICONS: TRENNER + SCHLUSS */

/* -------------------------------------------------------
   6) TRENN-ICON & ABSCHLUSS-ICON
------------------------------------------------------- */

          .icon_trenner {   /* ⚠️⚠️⚠️ GIBTS GRAD NICHT MEHR ??? ⚠️⚠️⚠️ */
            display: block;
            width: max-content;
            margin: 1rem auto;                   /* 👉 Abstand + Zentrieren*/
            font-size: 3rem;                     /* 👉 Icon-Größe Desktop */
            filter: grayscale(70%) opacity(0.3); /* 👉 Blass-Effekt */
          }


          
.icon_schluss {
  display: block;
  width: max-content;
  margin: 0 auto;
  font-size: 8rem;                     /* 👉 Icon-Größe Desktop */
  filter: grayscale(70%) opacity(0.3); /* 👉 Blass-Effekt */
}





/* ============================================
   ​🟥 Schöner Trenner (Gradient-Linie + Icon in Mitte)
   ============================================ */

.saga-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.4;                  /* 👉 Gesamt-Abschwächung */

    /* Farbton beeinflussen */
    filter:
        sepia(1)
        hue-rotate(-10deg)
        saturate(20)
        brightness(0.2);

}




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

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

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


/* #endregion */



/* #region 🎴 KACHELN: GRID + KACHELN + TEXTE + FILTER */

/* -------------------------------------------------------
   Märchen Kachel-Gitter
------------------------------------------------------- */

.maerchen-grid {
  margin-top: 3rem;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.4rem;

  /* Linien oben - unten 
  padding: 1.2rem 0;                
  border-top: 1px solid rgba(0,0,0,0.15);
  border-bottom: 1px solid rgba(0,0,0,0.15);  */
}

/* Radio-Buttons verstecken */
input[type="radio"][name="maerchen"] {
  display: none;
}

/* Kacheln */
.kachel {
  cursor: pointer;
  text-align: center;
  padding: 0.8rem;
  border-radius: 10px;
  background: #f5f0e8AA;        /* 👉 Hintergrund-Farbe der Kachel >> mit Transparenz?? */
  box-shadow: 2px 2px 8px rgba(0,0,0,0.15);
  transition: transform 0.2s;
}

.kachel:hover {
  transform: scale(1.03);
}

.kachel img {
  width: 100%;
  border-radius: 8px;
}

.kachel.locked {
  opacity: 0.7;
  filter: grayscale(30%);
}



/* Inhalte ausblenden */
.maerchen-inhalt {
  display: none;
}

/* Intro standardmäßig ausblenden */
#intro-text {
  display: none;
  text-align: center;
  opacity: 0.99;
  font-size: 2rem;
  margin: 2rem 0 3rem;
}

/* Intro anzeigen, wenn m0 aktiv */
#m0:checked ~ #intro-text {
  display: block;
}

/* Märchen anzeigen */
#m1:checked ~ #content-m1,
#m2:checked ~ #content-m2,
#m3:checked ~ #content-m3,
#m4:checked ~ #content-m4,
#m5:checked ~ #content-m5,
#m6:checked ~ #content-m6,
#m7:checked ~ #content-m7,
#m8:checked ~ #content-m8 {
  display: block;
}


/* Text für noch verborgene Märchen anzeigen */
#m2:checked ~ #hidden-text,
#m3:checked ~ #hidden-text,
#m4:checked ~ #hidden-text,
#m5:checked ~ #hidden-text,
#m6:checked ~ #hidden-text,
#m7:checked ~ #hidden-text,
#m8:checked ~ #hidden-text {
  display: block;
}






/* Hinweis-Text */
.hinweis {
  font-size: 1.8rem;
  line-height: 1.1;
  color: #776666;

  opacity: 0.6;
  /* text-align: center; */
  margin: 2rem 0;
}

/* Text IN den Kacheln – freies Märchen */
.kachel p {
  font-family: 'Caveat', cursive;
  font-size: 1.4rem;
  text-align: center;
  line-height: 0.9;
  margin:0;                  
  margin-top: 0.2rem;                  /* 👉 Abstand Bild - Text */
  color: #442200;
  font-weight: 600;
}

/* Text IN den Kacheln – gesperrt */
.kachel.locked p {
  font-family: 'Caveat', cursive;
  font-size: 1.5rem;

  margin-top: 0.7rem;   /* Text vertikal mittiger positionieren (händisch) */

  text-align: center;
  color: #333;
  opacity: 0.5;
  letter-spacing: 0.5px;
  font-style: italic;
}



/* Kachel-Bildfilter */
.maerchen-01 img { filter: saturate(0.55) brightness(0.92) contrast(0.95); }
.maerchen-02 img { filter: grayscale(60%) brightness(0.9); }
.maerchen-03 img { filter: grayscale(65%) brightness(0.9); }
.maerchen-04 img { filter: grayscale(70%) brightness(0.9); }
.maerchen-05 img { filter: grayscale(60%) brightness(0.85); }
.maerchen-06 img { filter: grayscale(75%) brightness(0.92); }
.maerchen-07 img { filter: grayscale(65%) brightness(0.88); }
.maerchen-08 img { filter: grayscale(70%) brightness(0.9); }




/* Standard: nur die ersten 3 Kacheln anzeigen */
.maerchen-grid .kachel:nth-child(n+4) {
  display: none;
}




/* #endregion */







/* #region 🟥🟥🟥 MOBILE (max-width: 1000px) */


@media (max-width: 1000px) {

  /* #region 📱📄 MOBILE: PAPIER-HINTERGRUND */

  /* Hintergrund-Bild PAPIER */
  .site-wrapper::before {
      background-size: cover;           /* Bild wird in MOBILE nicht mehr Y-gestreckt */
      background-position: center;      /* sondern beschnitten (bei langem Text Li-Re Beschnitt) */
      background-repeat: no-repeat;
  }

  /* #endregion */



/* #region Ⓜ️ LOGO - Überschrift */

.maerchen-logo {
    width: 100%;          /* Größe anpassen */
 }   

/* #endregion */



  /* #region 📱🔤 MOBILE: TYPOGRAFIE */

  /* --- Typo MOBILE --- */


          /* ⚠️⚠️⚠️ AUFGRUND Grafik-Logo NICHT MEHR BENÖTIGT ⚠️⚠️⚠️ */
          h1.maerchenschrift {
            margin-top: 1rem;
            line-height: 1;
            font-size: 7.0rem;
            margin-bottom: 0.1rem;
          }

          p.maerchenschrift {
            margin-bottom: 2rem;         /* 👉 Anstand zum Märchen-Text */
            text-align: center;
            font-size: 2.5rem;
            line-height: 1.0;
          }
          /* ⚠️⚠️⚠️ AUFGRUND Grafik-Logo NICHT MEHR BENÖTIGT ⚠️⚠️⚠️ */



  h2 {
    font-size: 4.6rem;        /* 👉 mobile Überschrift */
    margin-top: 3rem;
    margin-bottom: 2rem;
  }

  p {
    font-size: 4rem;        /* 👉 mobile Fließtextgröße */
    margin-bottom: 5rem;
    line-height: 1.15;
    hyphens: auto;
  }

  /* #endregion */


  /* #region 📱🖼️ MOBILE: BILDER */

  /* --- 🟩 Bilder --- */
  /* Der Bild-Wrapper wird jetzt vollbreit */

  .mobile-zoom2 {
    width: 100%;
    height: auto;
    margin: 0 0 4rem 0;
    float: none;
    display: block;

    /* Seitenverhältnis beibehalten, damit es nicht verzerrt wird */
    aspect-ratio: 430 / 310;
  }

  /* Bilder füllen den Container auf Mobile */
  .mobile-zoom2 img {
    width: 100%;
    height: 100%;
  }


  .maerchenbild-wrap img {
    box-shadow: 2px 2px 18px rgba(0,0,0,0.4); 
    border-radius: 15px;
  }




  /* #endregion */


  /* #region 📱📦 MOBILE: INHALTSBEREICH */

  /* --- Wrapper --- */
  .site-wrapper {
    margin-bottom: -5px;    /* 👉 Feinkorrektur Papierkante */
  }

  /* --- Content --- */
  .site-content {
    margin-top: 10px;            /* 👉 Abstand unter Headline */
    padding: 70px 50px 120px;    /* 👉 Innenabstände >> Textbreite + unterer Abstand >> Platz für Icon unten */
  }

  /* #endregion */


  /* #region 📱⭐ MOBILE: ICONS - TRENNER */

  /* --- Icon mobil --- */

  .icon_trenner {
    margin: 1rem auto;                   /* 👉 Abstand + Zentrieren*/
    font-size: 3rem;                     /* 👉 Icon-Größe Desktop */
  }

  .icon_schluss {
    font-size: 15rem;       /* 👉 mobile Icon-Größe */
    margin: 40px auto 0;    /* 👉 Abstand zum Text */
    opacity: 1;             /* 👉 volle Sichtbarkeit (Filter multipliziert sonst!) */
  }



/* ===========================================================
   ​🟥 Schöner Trenner (Gradient-Linie + Icon in Mitte) >> MOBILE
   =========================================================== */
    .saga-divider {
        margin: 4rem 0;          /* 👉 Abstand oben/unten */
        opacity: 0.4;            /* 👉 Gesamt etwas dezenter */
    }

    /* ICON */
    .saga-divider span {
        margin: 0 2rem;        /* 👉 Abstand Icon ↔ Linie */
        font-size: 5rem;       /* 👉 Icon  */
    }


.saga-divider::before,
.saga-divider::after {
    height: 4px;                   /* 👉 Linienstärke */
}






  /* #endregion */


/* #region 📱🎴 MOBILE: KACHELN */


/* Mobile: → Kachel 4 wieder anzeigen >> oder was halt oben ausgeblendet wurde wegen */
  .maerchen-grid .kachel:nth-child(4) {
    display: block;
  }




  /* Grid enger machen → kleinere minmax */
  .maerchen-grid {
    margin-top: 4rem;   /* etwas mehr Luft - MOBILE */

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem; /* etwas mehr Abstand auf Mobile */
  }


  /* Kachel größer + mehr Luft */
  .kachel {
    padding: 1.3rem;
    border-radius: 14px;
  }

  /* Bild bleibt 100% */
  .kachel img {
    border-radius: 12px;
  }

  /* Text in freien Kacheln */
  .kachel p {
    margin-top: 0.3rem;                  /* 👉 Abstand Bild - Text */
    font-size: 3.0rem;
    line-height: 0.9;
  }

  /* Text in gesperrten Kacheln */
  .kachel.locked p {
    font-size: 2.8rem;
    margin-top: 1.0rem;   /* Text vertikal mittiger positionieren (händisch) */
  }

  /* Hinweistext */
  .hinweis {
    font-size: 4.2rem;
    margin: 3rem 0;
  }


/* #endregion */



} /* Ende @media */

/* #endregion */