:root {
  --ink: #202423;
  --cream: #fff7e8;
  --paper: #eadfc8;
  --line: #303532;

  --yellow: #f4c426;
  --teal: #1aa7a1;
  --blue: #2f69c8;
  --red: #c63d35;
  --orange: #e97827;
  --green: #639d3d;
  --violet: #7650a8;

  font-family: Arial, Helvetica, sans-serif;
}


/* =========================================================
   GRUNDEINSTELLUNGEN
   ========================================================= */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);

  background:
    radial-gradient(
      circle at 12% 10%,
      rgba(244, 196, 38, .35),
      transparent 18%
    ),
    radial-gradient(
      circle at 85% 15%,
      rgba(26, 167, 161, .28),
      transparent 20%
    ),
    radial-gradient(
      circle at 78% 78%,
      rgba(198, 61, 53, .18),
      transparent 24%
    ),
    #d4c4a4;
}

a:link, a:visited {color: var(--red);}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.app {
  width: min(1180px, 94%);
  margin: 24px auto 52px;
}


/* =========================================================
   HEADER / HERO
   ========================================================= */

.hero {
  min-height: 250px;
  position: relative;
  overflow: hidden;

  border: 3px solid var(--line);
  border-radius: 50px 18px 62px 26px / 28px 56px 24px 60px;

  background:
    linear-gradient(
      125deg,
      #168382 0 30%,
      #f2bc27 30% 47%,
      #c63d35 47% 66%,
      #3b61aa 66%
    );

  box-shadow: 0 8px 22px rgba(34, 27, 18, .2);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 14px;

  border: 2px solid rgba(255, 247, 232, .72);
  border-radius: 34px 54px 25px 48px / 52px 28px 50px 24px;

  pointer-events: none;
}

.heroText {
  position: relative;
  z-index: 2;

  width: min(720px, 86%);
  margin: 34px 0 28px 5%;
  padding: 23px 28px;

  background: rgba(255, 247, 232, .94);

  border: 3px solid var(--line);
  border-radius: 34px 12px 42px 18px / 18px 36px 20px 38px;

  transform: rotate(-.6deg);
}

.kicker {
  margin: 0 0 8px;

  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .16em;
}

h1 {
  margin: 0;

  font-size: clamp(2.5rem, 6vw, 5.2rem);
  line-height: .9;
  letter-spacing: -.055em;
}

.heroText p:last-child {
  margin: 18px 0 0;
  line-height: 1.55;
}


/* =========================================================
   DEKORATIVE FORMEN
   ========================================================= */

.blob {
  position: absolute;
  z-index: 1;

  border: 3px solid var(--line);
}

.b1 {
  width: 92px;
  height: 92px;

  right: 7%;
  top: 22px;

  background: var(--green);
  border-radius: 46% 54% 38% 62%;

  transform: rotate(19deg);
}

.b2 {
  width: 55px;
  height: 55px;

  right: 18%;
  bottom: 23px;

  background: var(--violet);
  border-radius: 65% 35% 55% 45%;
}

.b3 {
  width: 46px;
  height: 74px;

  left: 39%;
  top: -12px;

  background: var(--orange);
  border-radius: 40% 60% 50% 50%;

  transform: rotate(-19deg);
}


/* =========================================================
   PANELS
   ========================================================= */

.panel {
  margin-top: 22px;
  padding: 21px;

  border: 3px solid var(--line);
  border-radius: 28px 12px 36px 16px / 18px 34px 20px 30px;

  background: rgba(255, 247, 232, .95);

  box-shadow: 0 8px 20px rgba(34, 27, 18, .16);
}

.panel:nth-of-type(even) {
  border-radius: 14px 38px 18px 34px / 34px 16px 36px 20px;
}


/* =========================================================
   PANEL-KÖPFE
   ========================================================= */

.head {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 16px;
}

.head h2 {
  margin: 0;
  font-size: 1.42rem;
}

.spread {
  justify-content: space-between;
}

.spread > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.num {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  border: 2px solid var(--line);
  border-radius: 48% 52% 42% 58%;

  background: var(--yellow);

  font-weight: 900;
}


/* =========================================================
   ZEILEN UND BUTTONS
   ========================================================= */

.row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

button,
.fileBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 42px;
  padding: 9px 15px;

  border: 2px solid var(--line);
  border-radius: 14px 7px 16px 9px / 8px 16px 9px 15px;

  background: #edf1e8;
  color: var(--ink);

  font-weight: 800;

  box-shadow: 2px 3px 0 rgba(47, 52, 50, .28);
}

button.primary {
  background: var(--yellow);
}

button.warm {
  background: #f2a347;
}

.fileBtn input {
  display: none;
}


/* =========================================================
   CANVAS / WELLENFORM
   ========================================================= */

.canvasWrap {
  position: relative;
  overflow: hidden;

  margin-top: 14px;

  border: 3px solid var(--line);
  border-radius: 18px 8px 20px 10px;

  background: #142522;
}

canvas {
  display: block;
  width: 100%;
  height: auto;
}

#playhead {
  position: absolute;

  top: 0;
  bottom: 0;

  width: 2px;

  background: var(--yellow);

  box-shadow:
    0 0 10px rgba(244, 196, 38, .9);
}


/* =========================================================
   GRIDS
   ========================================================= */

.grid {
  display: grid;
  gap: 14px;

  margin-top: 14px;
}

.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* =========================================================
   EINSTELLUNGSKARTEN
   ========================================================= */

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.cards article {
  padding: 14px;

  border: 2px solid var(--line);
  border-radius: 18px 9px 21px 10px / 10px 20px 12px 18px;

  background: #eadfc8;
}

.cards article:nth-child(3n + 2) {
  background: #d9e6dd;
}

.cards article:nth-child(3n) {
  background: #efd7b9;
}

.cards h3 {
  margin: 0 0 12px;
}


/* =========================================================
   FORMULARE
   ========================================================= */

label {
  display: grid;
  grid-template-columns:
    minmax(100px, 1fr)
    minmax(120px, 2fr)
    auto;

  align-items: center;
  gap: 8px;

  margin: 8px 0;

  font-size: .91rem;
  font-weight: 700;
}

output {
  min-width: 60px;

  text-align: right;
  font-variant-numeric: tabular-nums;
}

input[type="range"] {
  width: 100%;
  accent-color: var(--red);
}

input[type="checkbox"] {
  width: 20px;
  height: 20px;

  accent-color: var(--green);
}

input[type="text"],
select {
  min-height: 38px;
  padding: 7px 9px;

  border: 2px solid var(--line);
  border-radius: 10px;

  background: #fffaf0;
}

.switch {
  grid-template-columns: 1fr auto;
}


/* =========================================================
   CRAZY-TEMPO
   ========================================================= */

#crazyTempo {
  opacity: .42;
}

body[data-mode="crazy"] #crazyTempo {
  opacity: 1;
}


/* =========================================================
   HINWEISTEXTE
   ========================================================= */

.small {
  margin: 9px 0 0;

  color: #615b4d;

  font-size: .9rem;
  line-height: 1.45;
}


/* =========================================================
   MODI
   ========================================================= */

.modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.mode {
  position: relative;
  display: block;

  min-height: 155px;
  padding: 18px;

  border: 3px solid var(--line);
  border-radius: 28px 12px 34px 14px / 18px 30px 16px 36px;

  box-shadow: 3px 4px 0 rgba(47, 52, 50, .25);
}

.mode input {
  position: absolute;

  right: 12px;
  top: 12px;

  width: 20px;
  height: 20px;
}

.mode strong {
  display: block;

  margin-bottom: 10px;

  font-size: 1.55rem;
}

.mode span {
  line-height: 1.45;
}

.mode.relaxed {
  background:
    linear-gradient(
      135deg,
      #bddb7d,
      #6db7a4
    );
}

.mode.active {
  background:
    linear-gradient(
      135deg,
      #f5d047,
      #e9752f
    );
}

.mode.crazy {
  background:
    linear-gradient(
      135deg,
      #7650a8 0 32%,
      #d94339 32% 65%,
      #2a91ad 65%
    );
}

.mode.selected {
  outline: 5px solid rgba(31, 36, 36, .22);
  transform: translateY(-2px);
}


/* =========================================================
   STATUS
   ========================================================= */

#status {
  padding: 7px 11px;

  border: 2px solid var(--line);
  border-radius: 999px;

  background: #ece1cb;

  font-size: .86rem;
  font-weight: 800;
}


/* =========================================================
   SONG / ZUSAMMENFASSUNG
   ========================================================= */

.song {
  margin: 16px 0;
}

.summary {
  padding: 12px 14px;

  border-left: 6px solid var(--teal);

  background: #e4ead5;

  line-height: 1.5;
}


/* =========================================================
   EXPORT
   ========================================================= */

.export > label:first-child {
  display: grid;
  grid-template-columns: 1fr;

  min-width: 210px;
  margin: 0;
}


/* =========================================================
   INFORMATIONSBEREICH
   ========================================================= */

.info h2 {
  margin-top: 0;
}

.three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.three article {
  padding: 14px;

  border: 2px solid var(--line);
  border-radius: 14px;

  background: #f0e3ca;
}

.three h3 {
  margin: 0 0 7px;
}

.three p {
  margin: 0;
  line-height: 1.5;
}


/* =========================================================
   V02: OPTIONALE EFFEKTE
   ========================================================= */

.effect-card {
  background:
    linear-gradient(
      145deg,
      #d7e7df,
      #eadfc8
    ) !important;
}

.effect-card input[type="checkbox"] {
  accent-color: var(--teal);
}

.effect-card:has(#reverbOn:not(:checked)) label:not(.switch),
.effect-card:has(#delayOn:not(:checked)) label:not(.switch) {
  opacity: .52;
}


/* =========================================================
   V04: SAMPLE-SPRUNGMARKE
   ========================================================= */

.sample-wave,
.canvasWrap.song {
  cursor: crosshair;
}

#sampleMarker {
  position: absolute;

  top: 0;
  bottom: 0;
  left: 0;

  width: 3px;

  background: var(--yellow);

  box-shadow:
    0 0 0 1px rgba(32, 36, 35, .35),
    0 0 12px rgba(244, 196, 38, .95);

  pointer-events: none;

  transform: translateX(-1px);
}

#sampleMarker::before {
  content: "";

  position: absolute;

  top: 5px;
  left: 50%;

  width: 13px;
  height: 13px;

  background: var(--yellow);

  border: 2px solid var(--line);
  border-radius: 50%;

  transform: translateX(-50%);
}

#samplePositionInfo {
  margin-top: 8px;
}


/* =========================================================
   LEXIKON
   ========================================================= */

.glossary-intro {
  margin: 0 0 16px;

  color: #615b4d;

  line-height: 1.5;
}

.glossary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.glossary-grid article {
  padding: 14px;

  border: 2px solid var(--line);
  border-radius: 14px;

  background: #f0e3ca;
}

.glossary-grid article:nth-child(3n + 2) {
  background: #e1eadf;
}

.glossary-grid article:nth-child(3n) {
  background: #efd9bb;
}

.glossary-grid h3 {
  margin: 0 0 7px;

  font-size: 1rem;
}

.glossary-grid p {
  margin: 0;

  font-size: .92rem;
  line-height: 1.48;
}


/* =========================================================
   RESPONSIVE: TABLET
   ========================================================= */

@media (max-width: 900px) {

  .cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .modes,
  .three {
    grid-template-columns: 1fr;
  }

  .glossary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* =========================================================
   RESPONSIVE: SMARTPHONE
   ========================================================= */

@media (max-width: 650px) {

  .app {
    width: 96%;
    margin-top: 10px;
  }

  .hero {
    min-height: 290px;
  }

  .heroText {
    width: 90%;
    margin-left: 5%;
    padding: 18px;
  }

  .panel {
    padding: 15px;
  }

  .cards,
  .two {
    grid-template-columns: 1fr;
  }

  .head.spread {
    align-items: flex-start;
    flex-direction: column;
  }

  label {
    grid-template-columns: 1fr;
  }

  output {
    text-align: left;
  }

  .row {
    width: 100%;
  }

  button,
  .fileBtn {
    flex: 1 1 auto;
  }

  .glossary-grid {
    grid-template-columns: 1fr;
  }
}