/* !! NUR Subseiten !!
  ============================================ */

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

.nav--subpage {
  height: clamp(3.5rem, 6vw, 4rem); /* var(--nav-height) */
}

/* sub Logo */
.nav--subpage .nav__logo {
  height: clamp(1.5rem, 3.5vw, 2.4rem);
}
.nav--subpage .nav__logo.is-small {
  /* height: clamp(1rem, 2vw, 1.8rem); */
  opacity: 0.8;
}

/* ── Zurück-Link (Text) ─ */
.nav__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  padding-top: 4px;
  color: var(--clr-midnight);
  font-size: var(--fs-sm);
  /* font-weight: 700;  */
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: opacity var(--transition-fast);
}

.nav__back:hover {
  opacity: 0.7;
}

.nav__logo-back {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

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

.island__text {
    max-inline-size: 120ch;
}

.island-404 {
  --x: 50%; --y: 50%; --w:  clamp(28ch, 60vw, 120ch);;
  text-align: center;
}

.island-landingsoon {
  --x: 50%; --y: 50%; --w:  clamp(28ch, 40vw, 50ch);;
  text-align: center;
}

.island-workshops {
  --x: 50%; --y: 50%; --w:  clamp(28ch, 100vw, 130ch);;
}

.island-workshops-interesse {
  --x: 50%; --y: 85%; --w:  clamp(28ch, 80vw, 100ch);;
}

.island-integration {
  --w:  clamp(28ch, 40vw, 65ch);;
}


/* ============================================
   WORKSHOPs Untereseite
   ============================================ */
/* workshops-GRID innerhalb der Insel */
.workshops-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);
}

.workshops-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);
}
.workshops-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 1rem 2.5rem rgba(15, 15, 61, 0.15);
  border-color: var(--clr-midnight-mid);
}

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

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

.workshops-box__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: 0; /* H3 hat default-margin, raus damit */
  letter-spacing: 1px;
  text-transform: uppercase;  
  margin-block-end: -0.3rem;
}

.workshops-box__text {
  font-size: var(--fs-sm);
  opacity: 0.8;
  margin: 0;
}
.workshops-box__cta {
  font-size: var(--fs-xs);
  font-weight: 700;
  margin-block-start: auto; /* CTA immer unten */
  opacity: 0.9;
}

/* Modals  */

#modal-workshop-1, #modal-workshop-2, #modal-workshop-3 {
  inline-size: clamp(20rem, 95vw, 60rem);
}

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

/* ============================================
   TABLET (Burger ab hier)
   ============================================ */
@media (max-width: 56.25em) { /* 900px */
  /* Pro Insel: Abstand von oben */
  .island-landingsoon { margin-block-start: 5vh; } 
  .island-404 { margin-block-start: 10vh; }  
}

/* ============================================
   PHONE
   ============================================ */
@media (max-width: 37.5em) { /* 600px */
  /* Pro Insel: Abstand von oben */
  .island-landingsoon { margin-block-start: 3vh; }
  .island-404 { margin-block-start: 10vh; }
 }