/* Triangles with Choci: gemeinsames Design für alle Seiten */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url(fonts/fraunces-latin.woff2) format("woff2"); }
  @font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
    src: url(fonts/nunito-latin.woff2) format("woff2"); }

  :root {
    --cream: #fbf0d8;
    --paper: #fffaf0;
    --cocoa: #4a2c20;
    --cocoa-soft: #7a5646;
    --milk: #8a5237;
    --caramel: #d9893f;
    --coral: #e8725b;
    --pistachio: #cfe0b0;
    --pistachio-deep: #5f7f45;
    --line: #ecd9b3;
    --serif: "Fraunces", Georgia, "Times New Roman", serif;
    --sans: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0; background: var(--cream); color: var(--cocoa);
    font-family: var(--sans); font-size: 18px; line-height: 1.6;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  img, svg { max-width: 100%; display: block; }
  img { height: auto; }
  a { color: var(--milk); }
  :focus-visible { outline: 4px solid var(--caramel); outline-offset: 3px; border-radius: 6px; }
  .wrap { width: min(1140px, 100% - 2.5rem); margin-inline: auto; }
  h1, h2, h3 { font-family: var(--serif); font-variation-settings: "SOFT" 100; font-weight: 700; line-height: 1.1; margin: 0; }

  /* Triangle bunting */
  .bunting { display: flex; height: 34px; overflow: hidden; background: var(--paper); border-bottom: 1px solid var(--line); }
  .bunting i { flex: 1 0 44px; background: var(--milk); clip-path: polygon(0 0, 100% 0, 50% 100%); margin-inline: 3px; }
  .bunting i:nth-child(4n+2) { background: var(--caramel); }
  .bunting i:nth-child(4n+3) { background: var(--coral); }
  .bunting i:nth-child(4n) { background: var(--pistachio-deep); }

  /* Header */
  header.site { background: var(--paper); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
  .bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 0; flex-wrap: wrap; }
  .logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--cocoa); }
  .logo svg { width: 38px; height: 34px; }
  .logo span { font-family: var(--serif); font-variation-settings: "SOFT" 100; font-weight: 700; font-size: 1.35rem; line-height: 1; }
  nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .4rem; }
  nav a { display: block; padding: .5rem 1rem; border-radius: 999px; text-decoration: none; color: var(--cocoa); font-weight: 700; font-size: 1rem; }
  nav a:hover { background: var(--cream); }
  nav a.hot { background: var(--coral); color: #fff; }
  nav a.hot:hover { background: var(--cocoa); }

  /* Hero */
  .hero { position: relative; padding: 3.5rem 0 4.5rem; overflow: hidden; }
  .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2rem; align-items: center; }
  .hero h1 { font-size: clamp(2.4rem, 6vw, 4.1rem); max-width: 14ch; margin-bottom: 1rem; }
  .hero p.lead { font-size: 1.2rem; color: var(--cocoa-soft); max-width: 44ch; margin: 0 0 1.8rem; }
  .actions { display: flex; flex-wrap: wrap; gap: .8rem; }
  .btn {
    display: inline-block; padding: .85rem 1.6rem; border-radius: 999px; font-weight: 800; text-decoration: none;
    background: var(--cocoa); color: #fff; border: 3px solid var(--cocoa); font-size: 1.05rem;
  }
  .btn:hover { background: var(--coral); border-color: var(--coral); color: #fff; }
  .btn.light { background: transparent; color: var(--cocoa); }
  .btn.light:hover { background: var(--cocoa); border-color: var(--cocoa); color: #fff; }
  .stage { position: relative; display: grid; place-items: center; min-height: 380px; }
  .stage .blob {
    position: absolute; inset: 6% 4% 4%; background: var(--paper); border-radius: 46% 54% 50% 50% / 55% 45% 55% 45%;
    border: 3px dashed var(--caramel);
  }
  .stage img { position: relative; width: min(470px, 90%); filter: drop-shadow(0 18px 0 rgba(74,44,32,.12)); animation: bob 4.5s ease-in-out infinite; }
  @keyframes bob { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-10px) rotate(1.5deg); } }
  .tri { position: absolute; width: 38px; height: 34px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
  .tri.a { top: 8%; left: 8%; background: var(--caramel); transform: rotate(-14deg); }
  .tri.b { top: 20%; right: 4%; background: var(--coral); width: 26px; height: 24px; transform: rotate(18deg); }
  .tri.c { bottom: 10%; left: 2%; background: var(--pistachio-deep); width: 28px; height: 26px; transform: rotate(8deg); }

  /* Zigzag divider */
  .zig { height: 22px; background: var(--paper);
    -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 40px 100%;
            mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 40px 100%; }

  /* Sections */
  section { padding: 4rem 0; }
  .sec-title { margin-bottom: .6rem; font-size: clamp(1.8rem, 4vw, 2.6rem); }
  .sec-intro { max-width: 56ch; color: var(--cocoa-soft); margin: 0 0 2rem; }

  /* Entry cards */
  .paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; }
  .path {
    display: flex; flex-direction: column; gap: .6rem; padding: 1.7rem; border-radius: 28px 28px 28px 8px;
    text-decoration: none; color: var(--cocoa); border: 3px solid var(--cocoa);
  }
  .path:hover { transform: translateY(-4px); }
  .path { transition: transform .15s ease; }
  .path h3 { font-size: 1.6rem; }
  .path p { margin: 0; }
  .path.p1 { background: #fbd9c9; }
  .path.p2 { background: var(--pistachio); }
  .path.p3 { background: #f8e2a6; }
  .path svg { width: 56px; height: 56px; }

  /* Coloring */
  .filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.8rem; }
  .filters button {
    font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; padding: .5rem 1.2rem; border-radius: 999px;
    border: 3px solid var(--cocoa); background: transparent; color: var(--cocoa);
  }
  .filters button[aria-pressed="true"] { background: var(--cocoa); color: #fff; }
  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.5rem; }
  .card { background: var(--paper); border: 3px solid var(--cocoa); border-radius: 22px; padding: 1rem; display: flex; flex-direction: column; gap: .7rem; }
  .card[hidden] { display: none; }
  .page { aspect-ratio: 3 / 4; background: #fff; border: 2px solid var(--line); border-radius: 10px; display: grid; place-items: center; padding: 8%; }
  .page svg { width: 100%; height: 100%; }
  .card h3 { font-size: 1.2rem; line-height: 1.2; }
  .card .meta { margin: 0; font-size: .95rem; color: var(--cocoa-soft); }
  .card .btn { text-align: center; padding: .6rem 1rem; margin-top: auto; font-size: 1rem; }

  /* Music */
  .music { background: var(--pistachio); border-block: 3px solid var(--cocoa); }
  .tracks { display: grid; gap: 1rem; max-width: 780px; }
  .track { display: grid; grid-template-columns: 56px 1fr; gap: 1rem; align-items: center; background: var(--paper); border: 3px solid var(--cocoa); border-radius: 22px; padding: 1rem 1.2rem; }
  .track .cover { width: 56px; height: 56px; border-radius: 14px; background: var(--caramel); display: grid; place-items: center; }
  .track .cover svg { width: 30px; height: 28px; }
  .track h3 { font-size: 1.15rem; margin-bottom: .25rem; }
  .track .row { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; }
  .track audio { flex: 1 1 220px; max-width: 100%; height: 40px; }
  .track a.dl { font-weight: 800; font-size: .95rem; }

  /* Parents */
  .parents-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.4rem; }
  .parent { background: var(--paper); border: 3px solid var(--line); border-radius: 22px; padding: 1.4rem; }
  .parent h3 { font-size: 1.2rem; margin-bottom: .4rem; }
  .parent p { margin: 0; color: var(--cocoa-soft); font-size: 1rem; }

  /* About Choci */
  .about { background: var(--paper); border-block: 3px solid var(--cocoa); }
  .about-grid { display: grid; grid-template-columns: 280px 1fr; gap: 3rem; align-items: center; }
  .about img { width: 100%; filter: drop-shadow(0 12px 0 rgba(74,44,32,.1)); }
  .about p { max-width: 54ch; color: var(--cocoa-soft); }

  /* Footer */
  footer { background: var(--cocoa); color: #f1e3c3; padding: 2.5rem 0 3rem; font-size: 1rem; }
  footer a { color: #fff; }
  footer .cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.2rem; }
  footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
  footer small { display: block; margin-top: 1.4rem; color: #cdb995; max-width: 70ch; }

  @media (max-width: 860px) {
    .hero-grid { grid-template-columns: 1fr; }
    .stage { order: -1; min-height: 300px; }
    .about-grid { grid-template-columns: 1fr; }
    .about img { max-width: 220px; margin: 0 auto; }
  }
  @media (max-width: 560px) { body { font-size: 17px; } section { padding: 3rem 0; } }
  @media (prefers-reduced-motion: reduce) { .stage img { animation: none; } html { scroll-behavior: auto; } .path { transition: none; } }

  /* Music list */
  .head-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.4rem; }
  .head-row .sec-title { margin: 0 0 .4rem; }
  .head-row .sec-intro { margin: 0; }
  .searchbox input { font: inherit; padding: .65rem 1.1rem; width: min(280px, 100%); border-radius: 999px; border: 3px solid var(--cocoa); background: var(--paper); color: var(--cocoa); }
  .searchbox input::placeholder { color: var(--cocoa-soft); }
  .sr-only { position: absolute; left: -9999px; }
  .chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
  .chips button { font: inherit; font-weight: 700; font-size: .98rem; cursor: pointer; padding: .5rem 1.1rem; border-radius: 999px;
    border: 3px solid var(--cocoa); background: transparent; color: var(--cocoa); display: inline-flex; gap: .5rem; align-items: center; }
  .chips button span { font-weight: 600; font-size: .85rem; background: rgba(74,44,32,.12); border-radius: 999px; padding: 0 .5rem; }
  .chips button[aria-pressed="true"] { background: var(--cocoa); color: #fff; }
  .chips button[aria-pressed="true"] span { background: rgba(255,255,255,.2); }
  .songs { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .9rem 1.4rem; }
  .song { display: grid; grid-template-columns: 52px 1fr auto; gap: .9rem; align-items: center; background: var(--paper); border: 3px solid var(--cocoa); border-radius: 22px; padding: .7rem 1.1rem .7rem .7rem; }
  .song.playing { background: #fff3d6; border-color: var(--coral); }
  .song .play { width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--cocoa); background: var(--caramel); display: grid; place-items: center; cursor: pointer; padding: 0; }
  .song .play:hover { background: var(--coral); }
  .song.playing .play { background: var(--coral); }
  .song .play svg { width: 18px; height: 18px; }
  .song h3 { font-size: 1.08rem; line-height: 1.2; margin: 0 0 .15rem; }
  .song .tag { font-size: .85rem; font-weight: 700; color: var(--pistachio-deep); }
  .song a.dl { font-weight: 800; font-size: .9rem; white-space: nowrap; }
  .music-status { min-height: 1.5rem; margin: 0 0 1rem; font-weight: 700; color: var(--cocoa); text-align: center; }
  .more { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
  .more button.btn { font: inherit; font-weight: 800; font-size: 1.05rem; cursor: pointer; }
  @media (max-width: 760px) { .songs { grid-template-columns: 1fr; } }

  /* School Stuff */
  .path.p4 { background: var(--sky, #cfe3ea); }
  .school { background: var(--paper); border-block: 3px solid var(--cocoa); }
  .school-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; margin-bottom: 1.8rem; }
  .school-tab { font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: .3rem; padding: 1.3rem 1.5rem; border-radius: 28px 28px 28px 8px; border: 3px solid var(--cocoa); background: #cfe3ea; color: var(--cocoa); }
  .school-tab:nth-child(2) { background: #fbd9c9; }
  .school-tab h3 { font-size: 1.5rem; }
  .school-tab span { font-size: .98rem; }
  .school-tab[aria-pressed="true"] { background: var(--cocoa); color: #fff; }
  .school-empty { text-align: center; border: 3px dashed var(--caramel); border-radius: 22px; padding: 2.2rem 1.5rem; background: var(--cream); }
  .school-empty h3 { font-size: 1.3rem; margin-bottom: .4rem; }
  .school-empty p { margin: 0; color: var(--cocoa-soft); }

  /* Coloring grid */
  .grid.six { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 1.1rem; }
  .grid.six .card { padding: .7rem; border-radius: 18px; }
  .grid.six .card h3 { font-size: 1.02rem; }
  .grid.six .card .btn { padding: .5rem .8rem; font-size: .95rem; }
  .page { padding: 4%; }
  .page img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .card .tag { align-self: flex-start; font-size: .82rem; font-weight: 800; padding: .1rem .7rem; border-radius: 999px; background: var(--pistachio); color: var(--cocoa); }

  /* SEO additions */
  .hero h1 .h1-sub { display: block; margin-top: .6rem; font-family: var(--sans); font-weight: 800; font-size: clamp(1.15rem, 2.4vw, 1.6rem); line-height: 1.25; color: var(--milk); }
  .hero h1 { max-width: 18ch; }
  .faq { background: var(--cream); }
  .faq-list { max-width: 820px; display: grid; gap: .8rem; }
  .faq details { background: var(--paper); border: 3px solid var(--cocoa); border-radius: 22px; padding: 0 1.3rem; }
  .faq summary { cursor: pointer; font-weight: 800; font-size: 1.08rem; padding: 1rem 0; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; font-size: 1.6rem; line-height: 1; color: var(--coral); flex: none; }
  .faq details[open] summary::after { content: "\2013"; }
  .faq details p { margin: 0 0 1.1rem; color: var(--cocoa-soft); }
  .ns-list { background: var(--paper); border: 3px solid var(--line); border-radius: 22px; padding: 1.2rem 1.5rem; margin: 1rem 0; }
  .ns-list h3 { margin-bottom: .6rem; } .ns-list h4 { margin: .8rem 0 .2rem; font-family: var(--serif); }
  .ns-list ul { margin: 0; padding-left: 1.2rem; }

  .legal { padding: 3.5rem 0 5rem; }
  .legal .wrap { max-width: 760px; }
  .legal h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 1.6rem; }
  .legal h2 { font-size: 1.35rem; margin: 2rem 0 .5rem; }
  .legal p { margin: 0 0 .9rem; }
  .legal address { font-style: normal; background: var(--paper); border: 3px solid var(--line); border-radius: 22px; padding: 1.2rem 1.5rem; margin-bottom: 1rem; }
  .back { display: inline-block; margin-bottom: 1.5rem; font-weight: 700; }

/* LANDING-PAGES */
  .p5 { background: #f6c99a; }
  .path.p5 { background: #f6c99a; }
  @font-face { font-family: "Titan One"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/titan-one-latin.woff2) format("woff2"); }
  .logo img { width: 44px; height: 44px; border-radius: 12px; display: block; }
  .logo span { font-family: "Titan One", var(--serif); font-weight: 400; font-size: 1.45rem; letter-spacing: .01em; line-height: 1; font-variation-settings: normal; }
  .logo span em { font-style: normal; color: var(--caramel); }
  .p7 { background: #cfe0b0; }
  .banner { padding: 1.2rem 0 0; }
  .banner img { display: block; width: 100%; max-width: 780px; margin: 0 auto; height: auto; border: 3px solid var(--cocoa); border-radius: 24px; background: var(--paper); }
  .hero.hero-solo { padding: 2.5rem 0 3.5rem; }
  .hero-solo .hero-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .hero-solo h1, .hero-solo p.lead { margin-left: auto; margin-right: auto; max-width: 30ch; }
  .hero-solo p.lead { max-width: 52ch; }
  .hero-solo .actions { justify-content: center; }
  .hero-solo .stage { display: none; }
  .card-actions { display: flex; gap: .5rem; margin-top: auto; }
  .card-actions .btn { flex: 1 1 auto; min-width: 0; margin-top: 0; padding: .55rem .7rem; font-size: .95rem; text-align: center; }
  .grid.six .card-actions { flex-direction: column; }
  .themes { padding-top: 0; padding-bottom: 2.5rem; }
  .theme-links { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
  .theme-links .btn { padding: .5rem 1rem; font-size: 1rem; }
  .theme-links .btn span { opacity: .7; font-weight: 700; margin-left: .2rem; }
  .more .btn[aria-busy] { opacity: .7; cursor: progress; }
  .path.p7 { background: #cfe0b0; }
  .path.p6 { background: #cfe3ea; }
  .path svg { width: 56px; height: 56px; }
  .season { padding-top: 0; padding-bottom: 3rem; }
  .crumbs { font-size: .95rem; margin-bottom: 1rem; color: var(--cocoa-soft); }
  .crumbs a { color: var(--milk); font-weight: 700; }
  .lp-hero { padding: 2.5rem 0 1.5rem; }
  .lp-hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 2rem; align-items: center; }
  .lp-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); max-width: 18ch; margin-bottom: 1rem; }
  .lp-hero .lead { font-size: 1.15rem; color: var(--cocoa-soft); max-width: 52ch; margin: 0 0 1.5rem; }
  .lp-choci { width: min(300px, 80%); justify-self: center; filter: drop-shadow(0 14px 0 rgba(74,44,32,.12)); }
  .lp-section { padding: 3rem 0; }
  .lp-songs { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; max-width: 860px; }
  .lp-song { background: var(--paper); border: 3px solid var(--cocoa); border-radius: 22px; padding: .9rem 1.2rem; display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: center; }
  .lp-song h3 { font-size: 1.1rem; margin: 0; }
  .lp-song a.dl { font-weight: 800; font-size: .95rem; white-space: nowrap; }
  .lp-song audio { grid-column: 1 / -1; width: 100%; height: 40px; }
  .ideas { max-width: 760px; padding-left: 1.3rem; margin: 0; }
  .ideas li { margin-bottom: .6rem; }
  .sec-intro a { color: var(--milk); font-weight: 700; }
  @media (max-width: 860px) { .lp-hero-grid { grid-template-columns: 1fr; } .lp-choci { order: -1; width: 200px; } }