/* ============================================================
   CAMPUS AFLOAT — Brand tokens & global styles
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Caveat:wght@500;600;700&family=Mulish:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&family=Permanent+Marker&display=swap');

:root {
  /* Brand colors */
  --navy:        #15324e;   /* deep navy — headlines, banners */
  --navy-700:    #1d4063;
  --navy-900:    #0d2336;
  --gold:        #f6a623;   /* golden-orange accent */
  --gold-deep:   #ef9415;
  --gold-soft:   #fbd089;
  --cream:       #faf5ea;   /* warm paper background */
  --cream-2:     #f3ead7;
  --ink:         #223240;   /* body text on cream */
  --ink-soft:    #54677a;
  --line:        #e4d9c2;

  /* Water / sea accents */
  --sea-pale:    #d6ecf3;
  --sea:         #8fc6dd;
  --sea-deep:    #4f9cba;
  --turq:        #5fd0c5;

  /* Sunset accents (for scene placeholders) */
  --sun-1:       #ffd27a;
  --sun-2:       #ff9d5c;
  --sun-3:       #ff7e7e;

  /* Type */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-marker:  'Permanent Marker', cursive;
  --font-script:  'Caveat', cursive;
  --font-body:    'Mulish', system-ui, sans-serif;

  /* tweakable accent (overridden by JS) */
  --accent: var(--gold);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

#root { min-height: 100vh; overflow-x: hidden; }

h1, h2, h3, h4 { margin: 0; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; }

img { display: block; max-width: 100%; }

::selection { background: var(--gold); color: var(--navy); }

/* ---- display headline helpers ---- */
.display {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.01em;
  font-weight: 400;
}
.marker { font-family: var(--font-marker); }
.script { font-family: var(--font-script); }

/* gold marker underline / highlight */
.tilt { display: inline-block; transform: rotate(-2deg); }

/* ---- scrollbar ---- */
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 99px; border: 3px solid var(--cream); }
*::-webkit-scrollbar-track { background: transparent; }

/* ---- layout ---- */
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: clamp(22px, 4vw, 52px); box-sizing: border-box; }
.wrap-narrow { width: 100%; max-width: 880px; margin: 0 auto; padding-inline: clamp(22px, 4vw, 52px); box-sizing: border-box; }

/* fade/slide in helper */
@keyframes caRise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rise { animation: caRise .7s cubic-bezier(.2,.7,.2,1) both; }

@keyframes caFloat {
  0%,100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%     { transform: translateY(-9px) rotate(var(--rot, 0deg)); }
}


@media (prefers-reduced-motion: reduce) {
  .rise, .floaty { animation: none !important; }
}

/* Ablauf-Überschrift: Desktop flex row mit Icon links */
.ca-ablauf-head { display: flex; flex-direction: row; align-items: center; gap: 12px; }

/* ============================================================
   RESPONSIVE – Mobile Breakpoints
   Alle Grid-Layouts auf 1 Spalte umschalten unter 768px.
   ============================================================ */
@media (max-width: 768px) {

  /* Hero split → stack */
  .ca-hero-split {
    grid-template-columns: 1fr !important;
  }
  .ca-hero-split > *:last-child {
    min-height: 50vw;
  }
  /* Hero polaroid ausblenden auf kleinen Screens */
  .ca-hero-pola {
    display: none !important;
  }

  /* Törn-Grid → 1 Spalte */
  .ca-trip-grid {
    grid-template-columns: 1fr !important;
  }

  /* Footer-Grid → 1 Spalte (einspaltig untereinander) */
  .ca-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Ablauf-Grid → stack */
  .ca-ablauf-grid {
    grid-template-columns: 1fr !important;
  }

  /* Bordkasse-Grid → stack */
  .ca-bordkasse-grid {
    grid-template-columns: 1fr !important;
  }

  /* Nav-Links ausblenden (Hamburger-Menü wäre nächster Schritt) */
  .ca-navlinks {
    display: none !important;
  }

  /* Stat-Strip → 2 Spalten */
  .ca-stat-strip {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Statistik-Strip: Trennlinien auf Mobil ausblenden */
  .ca-stat-strip > * {
    border-left: none !important;
  }

  /* Bordkasse-Grid → 1 Spalte */
  .ca-bordkasse-grid {
    grid-template-columns: 1fr !important;
  }

  /* Ablauf-Überschrift: auf Mobil Sonne über Banner, zentriert */
  .ca-ablauf-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  /* Detail-Grid → stack */
  .ca-detail-grid {
    grid-template-columns: 1fr !important;
  }

  /* Mehr seitlicher Abstand auf dem Handy (vorher min. 22px) */
  .wrap, .wrap-narrow {
    padding-inline: 20px !important;
  }

  /* Sektionen, die volle Breite nutzen, brauchen eigenes Innenpadding,
     damit Text/Pillen nicht am Rand kleben */
  .ca-fullbleed-pad {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box;
  }

  /* Globale Sicherheit: kein Element breiter als der Viewport */
  * {
    max-width: 100%;
    box-sizing: border-box;
  }
  img {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 480px) {
  /* Stat-Strip → 1 Spalte auf sehr kleinen Screens */
  .ca-stat-strip {
    grid-template-columns: 1fr !important;
  }
  .wrap, .wrap-narrow {
    padding-inline: 18px !important;
  }
}