// Fonts

.amatic-sc-regular {
  font-family: "Amatic SC", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.amatic-sc-bold {
  font-family: "Amatic SC", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.loved-by-the-king-regular {
  font-family: "Loved by the King", cursive;
  font-weight: 400;
  font-style: normal;
}

.edu-sa-beginner {
  font-family: "Edu SA Beginner", cursive !important;
  font-optical-sizing: auto;
  font-style: normal;
}

.shadows-into-light-regular {
  font-family: "Shadows Into Light", cursive;
  font-weight: 400;
  font-style: normal;
}



body {
    font-family: "Shadows Into Light", cursive;
    font-size: 1.5rem;
    margin: 0;
    padding: 0;
}


.blob-container {
  background: #022C25;
  min-height: 100vh;           /* Höhe des Bild-/Hero-Bereichs */
  position: relative;
  overflow: hidden;           /* <- statt leerem 'overflow:' */
  isolation: isolate;         /* eigener Stapelkontext, verhindert Durchbluten */
  display: grid;
  place-items: center;        /* Inhalt hübsch zentrieren */
  padding: 4rem 1rem;         /* Luft, damit Text/Bild nicht an den Rand klebt */
}


.blob-c {
  position: absolute;
  inset: 0;
  filter: blur(40px);
  overflow: hidden;
  width: 100%;
  z-index: 0;
  pointer-events: none;       /* Klicks gehen nicht „ins Nichts“ */
}

.shape-blob {
    background:#C1CB3B;
    height: 60px;
    width: 80px;
    border-radius: 40% 50% 30% 40%;
    animation:
        transform 18s ease-in-out infinite both alternate,
        movement_one 12s ease-in-out infinite both;
    opacity:.7;
    position: absolute;
    left: 75%;
    top: 40%;
}
.shape-blob.one{
    background:#E8C942;
    height: 150px;
    width: 200px;
    left: 10px;
    top: 10px;
    transform: rotate(-180deg);
    animation: transform 8s ease-in-out infinite both alternate, movement_two 20s ease-in-out infinite both;
}

.shape-blob.six{
    background:#B6BD74;
    height: 70px;
    width: 100px;
    left: 160px;
    top: 200px;
    transform: rotate(-180deg);
    animation: transform 5s ease-in-out infinite both alternate, movement_two 5s ease-in-out infinite both;
}

.shape-blob.four{
    background:#DACF73;
    height: 100px;
    width: 80px;
    left: 350px;
    top: 60px;
    transform: rotate(-180deg);
    animation: transform 17s ease-in-out infinite both alternate, movement_two 13s ease-in-out infinite both;
}

.shape-blob.five{
    background:#E6CAA0;
    height: 100px;
    width: 80px;
    left: 480px;
    top: 30px;
    transform: rotate(-180deg);
    animation: transform 12s ease-in-out infinite both alternate, movement_two 18s ease-in-out infinite both;
}

.shape-blob.two{
    background:#E8C942;
    height: 150px;
    width: 150px;
    left: 600px;
    top: 150px;
    transform: rotate(-180deg);
    animation: transform 10s ease-in-out infinite both alternate, movement_two 10s ease-in-out infinite both;
}

.shape-blob.three{
    background:#AFB431;
    height: 150px;
    width: 150px;
    left: 800px;
    top: 30px;
    transform: rotate(-180deg);
    animation: transform 7s ease-in-out infinite both alternate, movement_two 23s ease-in-out infinite both;
}

.shape-blob.seven{
    background:#746C24;
    height: 150px;
    width: 150px;
    left: 350px;
    top: 500px;
    transform: rotate(-180deg);
    animation: transform 7s ease-in-out infinite both alternate, movement_two 23s ease-in-out infinite both;
}

@keyframes transform
{
    0%,
    100% { border-radius: 33% 67% 70% 30% / 30% 40% 70% 70%; }
    20% { border-radius: 37% 63% 51% 49% / 37% 35% 35% 63%; }
    40% { border-radius: 36% 64% 64% 36% / 64% 48% 52% 26%; }
    60% { border-radius: 37% 63% 51% 49% / 30% 30% 70% 73%; }
    80% { border-radius: 40% 60% 42% 58% / 51% 51% 49% 59%; }
}


@keyframes movement_one
{
    0%,
    100% { transform: none; }
    50% { transform: translate(50%, 20%) rotateY(10deg) scale(1); }
}

@keyframes movement_two
{
    0%,
    500% { transform: none; }
    50% { transform: translate(50%, 20%) rotate(-200deg) scale(1.3);}
}

h1, h2, h3, h4 {
    font-family: "Amatic SC", sans-serif;
    font-size: 2.8rem;
}

h3 {
    font-size: 2rem;
}

h4 {
    font-size: 1.8rem;
}

/* Navigation */
.invert {
    filter: invert(100%)
}
.navicon {
    height: 2em;
    witdh: 2em;
}
.nav-text {
    font-size: 2rem;
    margin: 0;
    margin-left: 1ex;
    float: right;
}
/* Responsive layout hide text on small screens */
@media (max-width: 600px) {
    .nav-text {
        display: none;
    }
}

/* INHALTS-LAYER: liegt über dem Hintergrund – aber im Hero */
.hero-content {
  position: relative;
  z-index: 2;                 /* sicher vor den Blobs */
  text-align: center;
  display: grid;
  gap: 1rem;
  justify-items: center;
}

#raidoingwaz-h1 {
  position: static;
  z-index: auto;
  margin: 0;
  font-family: "Amatic SC", sans-serif;
  font-weight: 500;
  font-size: clamp(2.8rem, 7vw, 4.5rem);
  letter-spacing: 2px;
  color: #fff;
  line-height: 0.95;
  text-shadow: 2px 3px 15px rgba(0,0,0,.25);
}
/* Responsive layout hide text on small screens */
@media (max-width: 600px) {
    #raidoingwaz-h1 {
        font-size: clamp(2.8rem, 7vw, 4.5rem);
    }
}

@media only screen and (max-width: 600px) {
  .raidoingwaz-h1 {
    font-family: "Amatic SC", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 3em;
    letter-spacing: 2px;
    color: white;
    line-height: .9em;
    position: absolute;
    z-index: 4;
    text-shadow: 2px 3px 15px rgba(0,0,0,.15);
  }
}


.main-box {
    max-width: 800px;
    margin: auto;
}


/* Glow-Bild: bleibt im Hero, skaliert responsiv */
.glow-container {
  position: relative;
  width: min(600px, 90vw);
  height: calc(min(600px, 90vw));
  margin-bottom: -2ex;
}
.glowimg {
  position: absolute;
  max-height: 90%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.glowimg.main { z-index: 2; }
.glowimg.glow {
  z-index: 1;
  transform: scale(1.01) translate(-50%, -50%);
  filter: brightness(0) invert(1) blur(5px);
  opacity: 0;
}
.glowimg.main:hover ~ .glowimg.glow { opacity: 1; }


.banner {
    background: #746C24;
    position: fixed;
    bottom: 0;
    animation: hideElement 3s forwards;
    animation-delay: 5s;
}
@keyframes hideElement {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

footer {
    background:#022C25;
    color: #AFB431;
}


// Fonts

.amatic-sc-regular {
  font-family: "Amatic SC", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.amatic-sc-bold {
  font-family: "Amatic SC", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.loved-by-the-king-regular {
  font-family: "Loved by the King", cursive;
  font-weight: 400;
  font-style: normal;
}

.edu-sa-beginner {
  font-family: "Edu SA Beginner", cursive !important;
  font-optical-sizing: auto;
  font-style: normal;
}

.shadows-into-light-regular {
  font-family: "Shadows Into Light", cursive;
  font-weight: 400;
  font-style: normal;
}



body {
    font-family: "Shadows Into Light", cursive;
    font-size: 1.5rem;
    margin: 0;
    padding: 0;
}


.blob-container {
  background: #022C25;
  min-height: 100vh;           /* Höhe des Bild-/Hero-Bereichs */
  position: relative;
  overflow: hidden;           /* <- statt leerem 'overflow:' */
  isolation: isolate;         /* eigener Stapelkontext, verhindert Durchbluten */
  display: grid;
  place-items: center;        /* Inhalt hübsch zentrieren */
  padding: 4rem 1rem;         /* Luft, damit Text/Bild nicht an den Rand klebt */
}


.blob-c {
  position: absolute;
  inset: 0;
  filter: blur(40px);
  overflow: hidden;
  width: 100%;
  z-index: 0;
  pointer-events: none;       /* Klicks gehen nicht „ins Nichts“ */
}

.shape-blob {
    background:#C1CB3B;
    height: 60px;
    width: 80px;
    border-radius: 40% 50% 30% 40%;
    animation:
        transform 18s ease-in-out infinite both alternate,
        movement_one 12s ease-in-out infinite both;
    opacity:.7;
    position: absolute;
    left: 75%;
    top: 40%;
}
.shape-blob.one{
    background:#E8C942;
    height: 150px;
    width: 200px;
    left: 10px;
    top: 10px;
    transform: rotate(-180deg);
    animation: transform 8s ease-in-out infinite both alternate, movement_two 20s ease-in-out infinite both;
}

.shape-blob.six{
    background:#B6BD74;
    height: 70px;
    width: 100px;
    left: 160px;
    top: 200px;
    transform: rotate(-180deg);
    animation: transform 5s ease-in-out infinite both alternate, movement_two 5s ease-in-out infinite both;
}

.shape-blob.four{
    background:#DACF73;
    height: 100px;
    width: 80px;
    left: 350px;
    top: 60px;
    transform: rotate(-180deg);
    animation: transform 17s ease-in-out infinite both alternate, movement_two 13s ease-in-out infinite both;
}

.shape-blob.five{
    background:#E6CAA0;
    height: 100px;
    width: 80px;
    left: 480px;
    top: 30px;
    transform: rotate(-180deg);
    animation: transform 12s ease-in-out infinite both alternate, movement_two 18s ease-in-out infinite both;
}

.shape-blob.two{
    background:#E8C942;
    height: 150px;
    width: 150px;
    left: 600px;
    top: 150px;
    transform: rotate(-180deg);
    animation: transform 10s ease-in-out infinite both alternate, movement_two 10s ease-in-out infinite both;
}

.shape-blob.three{
    background:#AFB431;
    height: 150px;
    width: 150px;
    left: 800px;
    top: 30px;
    transform: rotate(-180deg);
    animation: transform 7s ease-in-out infinite both alternate, movement_two 23s ease-in-out infinite both;
}

.shape-blob.seven{
    background:#746C24;
    height: 150px;
    width: 150px;
    left: 350px;
    top: 500px;
    transform: rotate(-180deg);
    animation: transform 7s ease-in-out infinite both alternate, movement_two 23s ease-in-out infinite both;
}

@keyframes transform
{
    0%,
    100% { border-radius: 33% 67% 70% 30% / 30% 40% 70% 70%; }
    20% { border-radius: 37% 63% 51% 49% / 37% 35% 35% 63%; }
    40% { border-radius: 36% 64% 64% 36% / 64% 48% 52% 26%; }
    60% { border-radius: 37% 63% 51% 49% / 30% 30% 70% 73%; }
    80% { border-radius: 40% 60% 42% 58% / 51% 51% 49% 59%; }
}


@keyframes movement_one
{
    0%,
    100% { transform: none; }
    50% { transform: translate(50%, 20%) rotateY(10deg) scale(1); }
}

@keyframes movement_two
{
    0%,
    500% { transform: none; }
    50% { transform: translate(50%, 20%) rotate(-200deg) scale(1.3);}
}

h1, h2, h3 {
    font-family: "Amatic SC", sans-serif;
    font-size: 2.8rem;
}

h3 {
    font-size: 2rem;
}

/* Navigation */
.invert {
    filter: invert(100%)
}
.navicon {
    height: 2em;
    witdh: 2em;
}
.nav-text {
    font-size: 2rem;
    margin: 0;
    margin-left: 1ex;
    float: right;
}
/* Responsive layout hide text on small screens */
@media (max-width: 600px) {
    .nav-text {
        display: none;
    }
}

/* INHALTS-LAYER: liegt über dem Hintergrund – aber im Hero */
.hero-content {
  position: relative;
  z-index: 2;                 /* sicher vor den Blobs */
  text-align: center;
  display: grid;
  gap: 1rem;
  justify-items: center;
}

#raidoingwaz-h1 {
  position: static;
  z-index: auto;
  margin: 0;
  font-family: "Amatic SC", sans-serif;
  font-weight: 500;
  font-size: clamp(2.8rem, 7vw, 4.5rem);
  letter-spacing: 2px;
  color: #fff;
  line-height: 0.95;
  text-shadow: 2px 3px 15px rgba(0,0,0,.25);
}
/* Responsive layout hide text on small screens */
@media (max-width: 600px) {
    #raidoingwaz-h1 {
        font-size: clamp(2.8rem, 7vw, 4.5rem);
    }
}

@media only screen and (max-width: 600px) {
  .raidoingwaz-h1 {
    font-family: "Amatic SC", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 3em;
    letter-spacing: 2px;
    color: white;
    line-height: .9em;
    position: absolute;
    z-index: 4;
    text-shadow: 2px 3px 15px rgba(0,0,0,.15);
  }
}


.main-box {
    max-width: 800px;
    margin: auto;
}


/* Glow-Bild: bleibt im Hero, skaliert responsiv */
.glow-container {
  position: relative;
  width: min(600px, 90vw);
  height: calc(min(600px, 90vw));
  margin-bottom: -2ex;
}
 .glowimg {
  position: absolute;
  max-height: 90%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.glowimg.main { z-index: 2; }
.glowimg.glow {
  z-index: 1;
  transform: scale(1.01) translate(-50%, -50%);
  filter: brightness(0) invert(1) blur(5px);
  opacity: 0;
}
.glowimg.main:hover ~ .glowimg.glow { opacity: 1; }


.banner {
    background: #746C24;
    position: fixed;
    bottom: 0;
    animation: hideElement 3s forwards;
    animation-delay: 5s;
}
@keyframes hideElement {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

footer {
    background:#022C25;
    color: #AFB431;
}


/* Helle Farben */
.lcol1  { background: #e9f1b5; }
.lcol2  { background: #E8C942; }
.lcol3  { background: #B6BD74; }
.lcol4  { background: #DACF73; }
.lcol5  { background: #E6CAA0; }
.lcol6  { background: #AFB431; }
.lcol7  { background: #746C24; }
.lcol8  { background: #FFFACD; }
.lcol9  { background: #F5F5DC; }
.lcol10 { background: #FFFFFF; }
.lcol11 { background: #C1CB3B; }

 
.more-box {
    position: relative;
    padding-bottom: 4px;
}

/* Start: Inhalt versteckt */
.more-content {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 260ms ease, opacity 220ms ease;
}

/* Button unten rechts */
.more-btn {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 2px 8px;
    background: rgba(180, 180, 180, 0.603);
}