/* !! NUR index.html !!
  ============================================ */

/* ============================================
 NAVIGATION
============================================ */


/* ============================================
  INSELN spezifisch
============================================ */

/* Island Start */ 
.island-start-img {
  inline-size: 100%;
  block-size: auto;
  max-block-size: 12rem;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.island p {
  /* text-wrap: balance; */
  margin-bottom: 0.5em;
}

.island-logo { --x: 75%; --y: 40%; --w:  clamp(28ch, 40vw, 55ch); }

.island-start { --x: 30%; --y: 70%; --w:  clamp(28ch, 40vw, 55ch); }

.island-mission { --x: 23%; --y: 30%; --w:  clamp(28ch, 45vw, 50ch); }

.island-about { --x: 72%; --y: 72%; --w: clamp(28ch, 48vw, 70ch); }

.island-angebot { --x: 50%; --y: 35%; --w:  clamp(32ch, 65vw, 70ch); }

.island-koop { --x: 70%; --y: 60%; --w:  clamp(28ch, 40vw, 55ch); }

.island-team { --x: 40%; --y: 40%; --w:  clamp(28ch, 40vw, 55ch); }

.island-kontakt { --x: 30%; --y: 40%;  --w:  clamp(28ch, 40vw, 55ch); }


/* ANGEBOT-GRID innerhalb der Insel */
.angebot-grid {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));   */
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-lg);
  margin-block-start: var(--space-md);
}

.angebot-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: rgba(253, 246, 232, 0.35);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.angebot-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 1rem 2.5rem rgba(15, 15, 61, 0.15);
  border-color: var(--clr-midnight-mid);
}

.angebot-box__icon {
  inline-size: clamp(2.5rem, 5vw, 3.5rem);
  block-size: clamp(2.5rem, 5vw, 3.5rem);
  color: var(--clr-midnight-mid);
}

.angebot-box__icon svg {
  inline-size: 100%;
  block-size: 100%;  
}

.angebot-box__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: 0;
  letter-spacing: 1px;
  text-transform: uppercase;  
}
.angebot-box__text {
  font-size: var(--fs-sm);
  opacity: 0.8;
  margin: 0;
}
.angebot-box__cta {
  font-size: var(--fs-xs);
  font-weight: 700;
  margin-block-start: auto; /* CTA immer unten */
  opacity: 0.9;
}



/* ============================================
  Einzelne PNGs per Klasse steuern
  ============================================ */
.float--astronaut-hand   { --x: 70%; --y: 80%; --w: clamp(14rem, 22vw, 32rem); }
.float--astronaut-flip   { --x: 35%; --y: 300%; --w: clamp(4rem, 9vw, 10rem); }
.float--lagerfeuer-zwei   { --x: 30%; --y: 150%; --w:  clamp(24rem, 50vw, 50rem); }
.float--mond-rund   { --x: 70%; --y: 210%; --w:  clamp(20rem, 30vw, 40rem); }

/* ============================================
   TABLET (Burger ab hier)
   ============================================ */
@media (max-width: 56.25em) { /* 900px */
  .angebot-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  }
  
  /* Pro Insel: Abstand von oben */
  .island-logo { margin-block-start: 5vh; }
  .island-start { margin-block-start: 5vh; }
  .island-mission { margin-block-start: 4vh; }
  .island-about { margin-block-start: 2vh; }
  .island-angebot { margin-block-start: 5vh; }
  .island-koop { margin-block-start: 40vh; }
  .island-team { margin-block-start: 8vh; }
  .island-kontakt { margin-block-start: 6vh; }    

  /* .float--astronaut-hand   { --x: 70%; --y: 80%; } */
  .float--astronaut-flip   { --x: 40%; --y: 305%; }
  .float--lagerfeuer-zwei   { --x: 35%; --y: 165%; }
  .float--mond-rund   { --x: 70%; --y: 220%; }

}

/* ============================================
   PHONE
   ============================================ */
@media (max-width: 37.5em) { /* 600px */
  .angebot-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    margin-block-start: 0; 
  }
  .island h2 { font-size: var(--fs-h3); margin-block-end: 0.0rem; }
  .island__text {
    font-size: calc(var(--fs-sm) + 0.07rem);
    opacity: 0.9;
    margin: 0;  
  }

  /* Pro Insel: Abstand von oben */
  .island-logo { margin-block-start: 4vh; }
  .island-start { margin-block-start: 4vh; }
  .island-mission { margin-block-start: 3vh; }
  .island-about { margin-block-start: 0vh; }
  .island-angebot { margin-block-start: 3vh; }
  .island-koop { margin-block-start: 45vh; }
  .island-team { margin-block-start: 8vh; }
  .island-kontakt { margin-block-start: 5vh; }    

  .float--astronaut-hand   { --x: 70%; --y: 80%; }
  .float--astronaut-flip   { --x: 45%; --y: 305%; }
  .float--lagerfeuer-zwei   { --x: 40%; --y: 160%; }
  .float--mond-rund   { --x: 70%; --y: 220%; }
}


/* LANDSCAPE */
@media (max-height: 30em) and (orientation: landscape) {
  :root {
    --nav-height: 3rem;
  }

  .angebot-grid { margin-block-start: 0; }
  
  .snap-section article {
    max-block-size: calc(100vh - var(--nav-height) - 1rem);
    padding: 0.5rem 0.75rem;    
  }
  
  .island h2 { font-size: var(--fs-h3); margin-block-end: 0.0rem; }
  .island__text {
    font-size: calc(var(--fs-sm) + 0.07rem);
    opacity: 0.9;
    margin: 0;  
  }

  /* Pro Insel: Abstand von oben */
  .island-logo { margin-block-start: 0vh; }
  .island-start { margin-block-start: -15vh; }
  .island-mission { margin-block-start: 14vh; }
  .island-about { margin-block-start: -10vh; --x: 73%; --y: 70%; }
  .island-angebot { margin-block-start: 20vh; --w: clamp(44ch, 90vw, 100ch);}
  .island-koop { margin-block-start: -5vh; }
  .island-team { margin-block-start: 12vh; --w:  clamp(40ch, 60vw, 65ch); }
  .island-kontakt { margin-block-start: 8vh; }   
  
}