/* Coolinarik — shared styles (design system "3a Bubblegum") */
:root { --bg: #F887BF; --accent: #E8380D; }

body { margin: 0; background: var(--bg); font-family: 'Baloo 2', sans-serif; }
p { font-family: 'Space Grotesk', sans-serif; letter-spacing: .005em; }
a, button { text-transform: uppercase; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .85; }

@keyframes cw-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes cw-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }

/* model-viewer (gemüse-intro): standard-ladebalken ausblenden */
model-viewer::part(default-progress-bar),
model-viewer::part(default-progress-mask) { display: none; }

/* metallic gradient titles (background set inline per palette) */
/* !important: the inline background shorthand on each span resets
   background-clip, and inline styles would otherwise win */
.grad-text { -webkit-background-clip: text !important; background-clip: text !important; color: transparent; }

/* card hover system */
.tilt-card { transform: rotate(var(--rot, 0deg)); transition: transform .35s ease; }
.tilt-card:hover { transform: rotate(0deg) scale(1.04); }
.tilt-card-sm { transform: rotate(var(--rot, 0deg)); transition: transform .35s ease; }
.tilt-card-sm:hover { transform: rotate(0deg) scale(1.03); }
.zoom-102 { transition: transform .35s ease; }
.zoom-102:hover { transform: scale(1.02); }
.zoom-103 { transition: transform .3s ease; }
.zoom-103:hover { transform: scale(1.03); }
.zoom-1015 { transition: transform .35s ease; }
.zoom-1015:hover { transform: scale(1.015); }
.zoom-team { transition: transform .3s ease; }
.zoom-team:hover { transform: scale(1.02); }

/* mobile: stack split cards, tame footer + hero illustrations */
@media (max-width: 820px) {
  .split-card { grid-template-columns: 1fr !important; }
  .contact-grid { grid-template-columns: 1fr !important; }
  .contact-grid > img { display: none; }
  .footer-title { padding-right: 0 !important; font-size: 42px !important; }
}

/* ── mobile navigation: burger + vollbild-overlay ─────────────────────── */
.nav-burger { display: none; background: #fff; color: var(--accent); border: none;
  border-radius: 999px; padding: 8px 14px; font-weight: 800; font-size: 17px;
  line-height: 1; cursor: pointer; font-family: inherit; }
@media (max-width: 740px) {
  .nav-burger { display: block; }
  .nav-links { display: none !important; }
  .nav-links.open { display: flex !important; position: fixed; inset: 0; z-index: 55;
    background: var(--bg); flex-direction: column !important;
    /* nowrap ist entscheidend: das inline flex-wrap der desktop-nav liess die
       spalte auf dem handy in eine zweite spalte umbrechen (button hing rechts) */
    flex-wrap: nowrap !important;
    justify-content: flex-start !important; align-items: center !important;
    gap: 20px !important; padding: 90px 32px 40px; overflow-y: auto; }
  /* vertikal zentriert, aber scrollbar wenn es knapp wird (margin-auto-trick
     statt justify-content:center, das oben abschneiden würde) */
  .nav-links.open > :first-child { margin-top: auto; }
  .nav-links.open > :last-child { margin-bottom: auto; }
  /* grosse, klare menü-einträge */
  .nav-links.open a { font-size: 20px; letter-spacing: .05em; }
  /* theme-dots + unterstützen-button leicht abgesetzt als abschluss */
  .nav-links.open > div { margin-top: 10px; }
  .nav-links.open > div button[data-theme] { width: 22px !important; height: 22px !important; }
}

/* ── mobile feintuning ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .hero-ill { display: none; }

  /* typografie: die vw-deckel der desktop-werte machen text auf dem handy
     winzig — hier mit sinnvollen mobilen grössen übersteuern.
     jeweils zwei varianten, weil gsap das style-attribut mit leerzeichen
     re-serialisiert ("font-size: min(7vw, 96px)") */
  [style*="font-size:min(7vw"], [style*="font-size: min(7vw"] { font-size: 10.5vw !important; }
  [style*="font-size:min(6.4vw"], [style*="font-size: min(6.4vw"],
  [style*="font-size:min(6vw"], [style*="font-size: min(6vw"] { font-size: 9.5vw !important; }
  [style*="font-size:min(5.6vw"], [style*="font-size: min(5.6vw"],
  [style*="font-size:min(5vw"], [style*="font-size: min(5vw"] { font-size: 8vw !important; }
  [style*="font-size:min(3.4vw"], [style*="font-size: min(3.4vw"] { font-size: 24px !important; }
  [style*="font-size:min(2.7vw"], [style*="font-size: min(2.7vw"] { font-size: 17px !important; }
  [style*="font-size:min(2.2vw"], [style*="font-size: min(2.2vw"],
  [style*="font-size:min(2.1vw"], [style*="font-size: min(2.1vw"] { font-size: 15px !important; }

  /* fixe sektionstitel (climate crisis ist ~1em pro zeichen breit —
     "WORKSHOPS" bei 44px = ~395px und sprengt 375px-viewports) */
  [style*="font-size:44px"] { font-size: 9vw !important; }
  [style*="font-size:42px"], [style*="font-size:40px"] { font-size: 8.5vw !important; }
  [style*="font-size:36px"] { font-size: 8vw !important; }
  [style*="font-size:32px"] { font-size: 24px !important; }
  [style*="font-size:30px"] { font-size: 23px !important; }

  /* karten-grids: eine spalte (minmax-mindestbreiten sprengen sonst den viewport) */
  [style*="minmax(380px"], [style*="minmax(340px"], [style*="minmax(320px"],
  [style*="minmax(300px"], [style*="minmax(250px"] { grid-template-columns: 1fr !important; }

  /* grid-items dürfen schrumpfen; lange climate-crisis-wörter würden die
     spur sonst über den viewport hinaus aufziehen */
  [style*="grid-template-columns"] > * { min-width: 0; }
  [style*="padding:40px"] { padding: 26px !important; }
  [style*="padding:38px"] { padding: 26px !important; }
  [style*="font-size:28px"] { font-size: 23px !important; }
  [style*="font-size:26px"] { font-size: 22px !important; }
  [style*="font-size:24px"] { font-size: 21px !important; }

  /* schutznetz gegen 1-2px-ausreisser (clip statt hidden, damit sticky-nav
     weiter funktioniert) */
  html, body { overflow-x: clip; }

  /* hero-video nicht höher als das format */
  #cw-vid { height: 54vw !important; }

  /* horizontale workshop-galerie: karten auf handy-breite */
  #cw-track > .tilt-card { width: 76vw !important; }
  #cw-track > div[style*="width:520px"] { width: 84vw !important; padding: 0 12px !important; }

  /* button-reihen dürfen umbrechen */
  [style*="display:flex;gap:14px"], [style*="display:flex;gap:12px"] { flex-wrap: wrap; justify-content: center; }

  /* footer: illustration weg, copyright linksbündig */
  img[src="/assets/img/logo-big.png"] { display: none; }
  [style*="text-align:right"] { text-align: left !important; }

  /* intro-loader: gemüse grösser (2 reihen à 5) */
  #cw-loader model-viewer { width: 16vw !important; height: 16vw !important; }
  #cw-loader .cw-veg span { font-size: 7.5vw !important; }
}