/*
 * Website von Tiki Ranch — ein Stylesheet für alle Seiten.
 *
 * Die CSP in nginx.conf erlaubt nur diese Datei (style-src 'self'): kein
 * <style>, kein style="…". Bilder liegen unter /bilder/ (img-src 'self'),
 * auch die als Hintergrund und Maske. Eine Webschrift gibt es nicht: Der
 * Schriftzug ist ein Bild aus Pfaden (bau/bilder.mjs), der Text nimmt eine
 * runde Systemschrift, wo das Gerät eine hat.
 *
 * Farben nur aus Palette 3 (docs/grafik.md 3, bau/palette.mjs);
 * bau/aussehen.test.mjs prüft das und rechnet die Kontraste der Paare aus
 * bau/aussehen.mjs nach WCAG für hell und dunkel nach. Hell und dunkel
 * folgen der Systemeinstellung — dunkel ist „Nacht auf der Insel“.
 */

/* ---------------------------------------------------------------- Farben */

:root {
  color-scheme: light dark;

  /* Flächen */
  --grund: #FFF7E8;          /* creme */
  --flaeche: #FFFBF2;        /* creme hell */
  --sand: #FAE9CB;           /* sand hell */
  --linie: #DCBCA0;          /* holz hell */

  /* Text */
  --text: #2A2140;           /* augendunkel */
  --text-leise: #635480;     /* lavendel kontur */
  --link: #244B66;           /* meerblau kontur */
  --marke: #7F3764;          /* hibiskus kontur, Abschnittsmarken */
  --fokus: #7F3764;

  /* Holzrahmen der Tafeln (grafik.md 9) */
  --holz: #C08552;
  --holz-kontur: #664744;

  /* Knöpfe */
  --knopf: #FFD43B;          /* sonnengelb */
  --knopf-kontur: #7F673A;
  --knopf-text: #2A2140;
  --knopf-2: #8CDFDF;        /* tuerkis hell */
  --knopf-2-kontur: #2C6071;

  /* Das Meer der Bühne */
  --meer-1: #8CDFDF;
  --meer-2: #2EC4C4;
  --meer-3: #1B8EA8;

  /* Band des Versprechens */
  --band: #244B66;           /* meerblau kontur */
  --band-text: #FFF7E8;
  --band-akzent: #FFE793;    /* sonnengelb hell */
  --band-fokus: #FFE793;

  --schatten: 0 6px 0 rgb(59 42 74 / 0.18);

  --schrift: ui-rounded, 'SF Pro Rounded', 'Nunito', 'Quicksand', 'Varela Round', 'Arial Rounded MT Bold', 'Segoe UI', system-ui, sans-serif;
  --breite: 1120px;
  --rand: clamp(16px, 4vw, 32px);
  --radius: 22px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #2A2140;        /* augendunkel */
    --flaeche: #2C3870;      /* nachtblau */
    --sand: #244B66;         /* meerblau kontur */
    --linie: #635480;        /* lavendel kontur */

    --text: #FFF7E8;
    --text-leise: #D9CEF2;   /* lavendel hell */
    --link: #8CDFDF;         /* tuerkis hell */
    --marke: #FFA6CC;        /* hibiskus hell */
    --fokus: #FFA6CC;

    --meer-1: #1B8EA8;
    --meer-2: #244B66;
    --meer-3: #2C3870;

    --band: #2C6071;         /* tuerkis kontur */

    --schatten: 0 6px 0 rgb(59 42 74 / 0.6);
  }
}

/* ---------------------------------------------------------------- Grundlagen */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: var(--link);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
  border-radius: 8px;
}

h1,
h2,
h3 {
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.sprungmarke {
  position: absolute;
  left: var(--rand);
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--knopf);
  color: var(--knopf-text);
  font-weight: 800;
  text-decoration: none;
}

.sprungmarke:focus {
  top: 12px;
}

/* ---------------------------------------------------------------- Kopf */

.kopf {
  background: var(--grund);
  border-bottom: 3px dashed var(--linie);
}

.kopf .huelle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  min-height: 76px;
  padding-block: 10px;
}

.wortmarke {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.wortmarke .zeichen {
  width: 48px;
  height: 48px;
}

.wortmarke .schriftzug {
  width: 160px;
  height: auto;
}

.navi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.navi a {
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.navi a:hover,
.navi a[aria-current='page'] {
  background: var(--sand);
}

.navi .sprache {
  border: 2px solid var(--linie);
}

/* ---------------------------------------------------------------- Bühne: die Insel im Meer */

.buehne {
  position: relative;
  padding-block: clamp(32px, 6vw, 72px) clamp(56px, 8vw, 96px);
  background:
    url('/bilder/meer.svg') 0 0 / 200px 180px repeat,
    radial-gradient(ellipse 80% 70% at 68% 48%, var(--meer-1) 0%, var(--meer-2) 48%, var(--meer-3) 100%);
  overflow: hidden;
}

/* Die Wellenkante zum Sand: Fläche in der Grundfarbe, geformt von welle.svg. */
.buehne::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 24px;
  background: var(--grund);
  -webkit-mask: url('/bilder/welle.svg') 0 100% / 160px 24px repeat-x;
  mask: url('/bilder/welle.svg') 0 100% / 160px 24px repeat-x;
}

.buehne-raster {
  display: grid;
  gap: 24px;
  align-items: center;
}

@media (min-width: 960px) {
  .buehne-raster {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 32px;
  }
}

.insel {
  width: 100%;
  max-width: 760px;
  justify-self: center;
}

/* ---------------------------------------------------------------- Tafeln (Holzrahmen) */

.tafel {
  padding: clamp(22px, 4vw, 36px);
  border: 6px solid var(--holz);
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: 0 0 0 3px var(--holz-kontur), var(--schatten);
}

.kicker {
  display: inline-block;
  margin: 0 0 14px;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--sand);
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}

.buehne h1 {
  margin: 0;
  font-size: clamp(34px, 5.4vw, 56px);
  font-weight: 800;
}

.einleitung {
  margin: 16px 0 0;
  color: var(--text-leise);
  font-size: clamp(18px, 2vw, 20px);
}

.knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border: 3px solid var(--knopf-kontur);
  border-radius: 999px;
  background: var(--knopf);
  color: var(--knopf-text);
  box-shadow: 0 4px 0 var(--knopf-kontur);
  font-size: 17px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.12s, box-shadow 0.12s;
}

.knopf:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--knopf-kontur);
}

.knopf:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--knopf-kontur);
}

.knopf-2 {
  border-color: var(--knopf-2-kontur);
  background: var(--knopf-2);
  box-shadow: 0 4px 0 var(--knopf-2-kontur);
}

.knopf-2:hover {
  box-shadow: 0 6px 0 var(--knopf-2-kontur);
}

.knopf-2:active {
  box-shadow: 0 1px 0 var(--knopf-2-kontur);
}

/* ---------------------------------------------------------------- Abschnitte */

.abschnitt {
  padding-block: clamp(48px, 8vw, 96px);
}

.abschnitt-sand {
  background: var(--sand);
}

.ueberschrift {
  display: grid;
  gap: 10px;
  max-width: 680px;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.ueberschrift h2 {
  margin: 0;
  font-size: clamp(30px, 4.4vw, 44px);
  font-weight: 800;
}

.ueberschrift p {
  margin: 0;
  color: var(--text-leise);
}

.marke-klein {
  margin: 0;
  color: var(--marke);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- Karten zum Spiel */

.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.karte {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 24px 28px;
  border: 3px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: var(--schatten);
}

.karte img {
  width: auto;
  height: 150px;
  margin: 0 auto 8px;
}

.karte h3 {
  margin: 0;
  font-size: 23px;
  font-weight: 800;
}

.karte p {
  margin: 0;
  color: var(--text-leise);
}

.rhythmus {
  max-width: 720px;
  margin: 36px auto 0;
  color: var(--text-leise);
  text-align: center;
}

/* ---------------------------------------------------------------- Band des Versprechens */

.band {
  position: relative;
  background: var(--band);
  color: var(--band-text);
}

.band :focus-visible {
  outline-color: var(--band-fokus);
}

.band .marke-klein {
  color: var(--band-akzent);
}

.band .ueberschrift p,
.band .zitat {
  color: var(--band-text);
}

.band h2 {
  color: var(--band-akzent);
}

.versprechen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.versprechen li {
  position: relative;
  padding-left: 44px;
}

/* Hibiskusblüte als Aufzählungszeichen. */
.versprechen li::before,
.text li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 30px;
  height: 30px;
  background: url('/bilder/bluete.svg') center / contain no-repeat;
}

.versprechen h3 {
  margin: 0 0 4px;
  color: var(--band-akzent);
  font-size: 20px;
  font-weight: 800;
}

.versprechen p {
  margin: 0;
}

.zitat {
  max-width: 760px;
  margin: 40px 0 0;
  padding-left: 20px;
  border-left: 5px solid var(--band-akzent);
  font-size: 20px;
  font-style: italic;
}

/* ---------------------------------------------------------------- Kontakt */

.kontakt {
  display: grid;
  gap: 16px;
  justify-items: start;
  max-width: 760px;
}

.kontakt h2 {
  margin: 0;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
}

.kontakt p {
  margin: 0;
  color: var(--text-leise);
}

.mail {
  font-weight: 800;
  word-break: break-all;
}

/* ---------------------------------------------------------------- Textseiten */

.text-seite {
  padding-block: clamp(36px, 7vw, 80px);
}

.text-seite h1 {
  margin: 0;
  font-size: clamp(34px, 5.4vw, 52px);
  font-weight: 800;
}

.text {
  max-width: 760px;
}

.text h2 {
  margin: 36px 0 10px;
  font-size: 23px;
  font-weight: 800;
}

.text h2:first-child {
  margin-top: 0;
}

.text h3 {
  margin: 24px 0 8px;
  font-size: 19px;
  font-weight: 800;
}

.text p,
.text ul,
.text ol,
.text address {
  margin: 0 0 14px;
  color: var(--text-leise);
  font-style: normal;
}

.text strong {
  color: var(--text);
}

.text ul {
  padding: 0;
  list-style: none;
}

.text ul li {
  position: relative;
  padding-left: 38px;
}

.text li::before {
  top: 4px;
  width: 24px;
  height: 24px;
}

.text ol {
  padding-left: 26px;
}

.text ol li::before {
  content: none;
}

.text li + li {
  margin-top: 8px;
}

.hinweis {
  margin: 0 0 18px;
  padding: 14px 18px;
  border-left: 5px solid var(--holz);
  border-radius: 12px;
  background: var(--sand);
}

.hinweis p {
  margin: 0;
  color: var(--text);
}

.stand {
  margin-top: 32px;
  color: var(--text-leise);
  font-size: 15px;
}

/* ---------------------------------------------------------------- 404 */

.leer {
  display: grid;
  place-items: center;
  min-height: 60vh;
  padding-block: 48px;
  text-align: center;
}

.leer img {
  width: 180px;
  margin: 0 auto 12px;
}

.leer h1 {
  margin: 8px 0 4px;
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 800;
}

.leer p {
  margin: 0 0 20px;
  color: var(--text-leise);
}

.leer .knoepfe {
  justify-content: center;
}

.zweisprachig + .zweisprachig {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 3px dashed var(--linie);
}

/* ---------------------------------------------------------------- Fuß */

.fuss {
  padding-block: 32px 40px;
  border-top: 3px dashed var(--linie);
  color: var(--text-leise);
  font-size: 16px;
}

.fuss .huelle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}

.fuss nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.fuss a {
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}

.fuss a:hover,
.fuss a[aria-current='page'] {
  text-decoration: underline;
}

.fuss .wortmarke .zeichen {
  width: 36px;
  height: 36px;
}

.fuss p {
  margin: 0;
}

/* ---------------------------------------------------------------- Bewegung */

@media (prefers-reduced-motion: no-preference) {
  .buehne {
    animation: stroemen 40s linear infinite;
  }

  .leer img {
    animation: wackeln 2.4s ease-in-out infinite;
    transform-origin: 50% 90%;
  }

  @keyframes stroemen {
    from { background-position: 0 0, 0 0; }
    to { background-position: 200px 0, 0 0; }
  }

  @keyframes wackeln {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}