* {
    box-sizing: border-box;
}


/* =========================================================
   FARBEN
   ========================================================= */

:root {
    --white: #ffffff;
    --black: #000000;

    --bg: #dce3e8;

    --gray-lightest: #f8fbfd;
    --gray-lighter: #edf2f5;
    --gray-light: #d9e1e6;
    --gray: #8998a3;
    --gray-dark: #6c7c87;
    --gray-darker: #53646f;
    --gray-darkest: #263a46;

    --blue: #1685d1;
    --blue-light: #4ca7e6;

    --red: #db0000;
    --red-light: #d34848;
    --red-dark: #a92222;

    --orange: #e7a511;
    --orange-light: #f0b81c;
    --orange-dark: #b87b00;

    --green: #38b753;

    --shadow: rgba(21, 35, 45, 0.16);
    --shadow-dark: rgba(0, 0, 0, 0.25);
    --shadow-darker: rgba(0, 0, 0, 0.4);
    --shadow-light: rgba(255, 255, 255, 0.5);
}


/* =========================================================
   GRUNDLAYOUT
   ========================================================= */

html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
}

body {
    min-height: 100vh;
    padding-top: 1px;

    font-family: Arial, Helvetica, sans-serif;
    color: var(--gray-darkest);

    background: var(--bg);
}

a:link, a:visited {color: #b84444;}

button,
input,
select {
    font: inherit;
}

button {
    touch-action: manipulation;
}

.app-shell {
    width: min(1500px, 96vw);
    margin: 10px auto 28px;
}


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

.panel {
    margin: 12px 0;

    background: linear-gradient(
        180deg,
        var(--gray-lighter),
        var(--gray-light)
    );

    border: 1px solid var(--gray-dark);
    border-radius: 10px;

    box-shadow:
        0 2px 7px var(--shadow);

    overflow: hidden;
}


/* =========================================================
   KOPFBEREICH
   ========================================================= */

.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
    padding: 18px 22px;
}

.eyebrow {
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.12em;

    color: var(--orange-dark);
}

h1 {
    margin-top: 5px;
          margin-bottom: 4px;
              font-size: clamp(2rem, 4.3vw, 3rem);
              line-height: 0.98;
    letter-spacing: -0.035em;
}

h1 span {
    font-weight: 500;
}

.hero p {
    margin: 0;

    font-size: 1.08rem;

    color: var(--gray-darker);
}


/* =========================================================
   HEADER-SYMBOL
   ========================================================= */

.hero-mark {
    width: 190px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    flex: 0 0 auto;

    opacity: 0.78;
}

.hero-mark span {
    width: 8px;

    background: var(--gray);

    border-radius: 4px;

    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.55);
}

.hero-mark span:nth-child(1),
.hero-mark span:nth-child(9) {
    height: 12px;
}

.hero-mark span:nth-child(2),
.hero-mark span:nth-child(8) {
    height: 22px;
}

.hero-mark span:nth-child(3),
.hero-mark span:nth-child(7) {
    height: 34px;
}

.hero-mark span:nth-child(4),
.hero-mark span:nth-child(6) {
    height: 44px;
}

.hero-mark span:nth-child(5) {
    height: 52px;
}


/* =========================================================
   TRANSPORT / HAUPTBUTTONS
   ========================================================= */

.transport {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;
    padding: 14px;
}

.btn {
    min-height: 44px;
    padding: 11px 16px;

    color: var(--white);

    background: linear-gradient(
        var(--gray),
        var(--gray-darker)
    );

    border: 1px solid var(--gray-darker);
    border-radius: 5px;

    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.25);

    cursor: pointer;
}

.btn:hover {
    filter: brightness(1.08);
}

.btn:active {
    transform: translateY(1px);
}

.btn-accent {
    background: linear-gradient(
        var(--orange-light),
        var(--orange-dark)
    );

    border-color: var(--orange-dark);
}

.btn-rec {
    font-weight: 700;

    background: linear-gradient(
        var(--red-light),
        var(--red-dark)
    );

    border-color: var(--red-dark);
}

.btn.recording {
    animation: pulse 1s infinite;
}

.danger {
    background: linear-gradient(
        var(--red-light),
        var(--red-dark)
    );
}

@keyframes pulse {

    50% {
        filter: brightness(1.32);
    }

}


/* =========================================================
   EINSTELLUNGEN
   ========================================================= */

.control-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.control-block {
    padding: 14px 20px;
}

.control-block + .control-block {
    border-left: 1px solid var(--gray);
}

h2 {
    margin: 0 0 12px;

    font-size: 1.05rem;
    letter-spacing: 0.05em;

    color: var(--orange-dark);
}

.row {
    display: flex;
    align-items: flex-end;

    gap: 18px;
}

.wrap {
    flex-wrap: wrap;
}

label {
    display: flex;
    flex-direction: column;

    gap: 6px;

    color: var(--gray-darker);
}

input[type="number"],
input[type="text"],
select {
    min-height: 41px;
    padding: 9px 10px;

    color: var(--gray-darkest);
    background: var(--gray-lightest);

    border: 1px solid var(--gray);
    border-radius: 4px;
}

input[type="range"] {
    min-width: 150px;

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


/* =========================================================
   CHECKBOXEN
   ========================================================= */

.check {
    min-height: 42px;

    flex-direction: row;
    align-items: center;

    gap: 8px;
}

.check input {
    width: 20px;
    height: 20px;

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


/* =========================================================
   VISUELLES METRONOM
   ========================================================= */

.visual-metro {
    min-height: 76px;
    margin-top: 14px;
    padding: 14px 24px 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 32px;

    
        background: linear-gradient(
            180deg,
            var(--gray-light),
            var(--gray)
        );


    border: 1px solid var(--gray);
    border-radius: 10px;

    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.8);
}

.beat-item {
    min-width: 30px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    gap: 8px;

    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;

    color: var(--gray-darker);
}

.beat-dot {
    width: 15px;
    height: 15px;

    flex: 0 0 15px;

    background: var(--gray);

    border: 1px solid var(--gray-dark);
    border-radius: 50%;

    box-shadow:
        inset 0 1px 2px var(--shadow-light);

    transition:
        transform 0.07s,
        background 0.07s,
        box-shadow 0.07s;
}

.beat-dot.active {
    background: var(--red);

    border-color: var(--red-dark);

    box-shadow:
        0 0 0 4px rgba(219, 0, 0, 0.12),
        0 0 8px rgba(219, 0, 0, 0.5),
        inset 0 1px rgba(255, 255, 255, 0.6);

    transform: scale(1.14);
}

.count-in-message {
    min-height: 34px;
    margin-top: 12px;

    text-align: center;

    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: 0.08em;

    color: var(--gray-darker);
}

.count-in-message.go {
    color: var(--red);

    transform: scale(1.05);
}


/* =========================================================
   SPUREN
   ========================================================= */

.track {
    min-height: 235px;

    display: grid;
    grid-template-columns: 270px 1fr 230px;
}

.track-head {
    padding: 15px;

    background: linear-gradient(
        180deg,
        var(--gray-lighter),
        var(--gray-light)
    );

    border-right: 1px solid var(--gray);
}

.track-head h2 {
    margin-bottom: 4px;

    font-size: 1.3rem;
}

.track-state {
    margin-bottom: 12px;

    font-size: 0.8rem;
    font-weight: 800;

    color: var(--gray-darker);
}

.track-actions {
    display: grid;

    gap: 7px;
}

.track-actions .btn {
    width: 100%;
    min-height: 40px;
    padding: 9px 12px;

    text-align: left;
}


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

.wave-wrap {
    position: relative;

    min-width: 0;

    background: var(--gray-darkest);
}

.wave {
    width: 100%;
    height: 100%;
    min-height: 230px;

    display: block;

    cursor: context-menu;
}

.wave-hint {
    position: absolute;
    left: 12px;
    bottom: 8px;

    font-size: 0.78rem;

    color: var(--gray);

    pointer-events: none;
}

.playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width: 2px;

    background: var(--white);

    opacity: 0;

    pointer-events: none;
}


/* =========================================================
   MIXER
   ========================================================= */

.mixer {
    padding: 16px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 22px;
}

.mixer label {
    font-size: 0.88rem;
}

.mixer input {
    width: 100%;
}

.value-readout {
    margin-left: 0.35em;

    font-weight: 700;
    font-variant-numeric: tabular-nums;

    color: var(--gray-darkest);
}


/* =========================================================
   MIDI / INFORMATIONEN
   ========================================================= */

.lower-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
}

.midi-box,
.info-box {
    padding: 16px 20px;
}

.midi-box {
    border-right: 1px solid var(--gray);
}

.midi-status-line {
    display: flex;
    align-items: center;

    gap: 10px;
    margin-bottom: 12px;
}

.status-led {
    width: 14px;
    height: 14px;

    background: var(--gray);

    border-radius: 50%;

    box-shadow:
        inset 0 1px 2px var(--shadow-darker);
}

.status-led.on {
    background: var(--green);

    box-shadow:
        0 0 10px rgba(56, 183, 83, 0.7);
}

.midi-map {
    margin-top: 12px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 10px;
}

.info-box p {
    margin: 0.5em 0;

    line-height: 1.45;

    color: var(--gray-darker);
}

.small {
    font-size: 0.83rem;
    line-height: 1.45;

    color: var(--gray-darker);
}


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

.lexicon {
    padding: 18px 20px;
}

.lexicon-grid {
    display: grid;
    grid-template-columns: repeat(
        3,
        minmax(0, 1fr)
    );

    gap: 12px;
}

.lexicon article {
    padding: 12px;

    background: rgba(255, 255, 255, 0.42);

    border: 1px solid var(--gray);
    border-radius: 6px;
}

.lexicon h3 {
    margin: 0 0 6px;

    font-size: 1rem;

    color: var(--gray-darkest);
}

.lexicon p {
    margin: 0;

    font-size: 0.92rem;
    line-height: 1.4;

    color: var(--gray-darker);
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer {
    padding: 10px;

    text-align: center;

    font-size: 0.82rem;

    color: var(--gray-darker);
}


/* =========================================================
   TOAST-MELDUNGEN
   ========================================================= */

.toast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1000;

    max-width: min(420px, 90vw);
    padding: 12px 16px;

    color: var(--white);
    background: var(--gray-darkest);

    border-radius: 7px;

    box-shadow:
        0 4px 20px var(--shadow-dark);

    opacity: 0;

    transform: translateY(12px);

    pointer-events: none;

    transition: 0.2s;
}

.toast.show {
    opacity: 1;

    transform: none;
}


/* =========================================================
   RECHTSKLICK-MENÜ
   ========================================================= */

.context-menu {
    position: fixed;
    z-index: 2000;

    padding: 5px;

    background: var(--gray-lightest);

    border: 1px solid var(--gray-dark);
    border-radius: 6px;

    box-shadow:
        0 5px 22px var(--shadow-dark);
}

.context-menu button {
    padding: 10px 14px;

    color: var(--gray-darkest);
    background: transparent;

    border: 0;

    cursor: pointer;
}

.context-menu button:hover {
    background: var(--gray-light);
}


/* =========================================================
   CODE
   ========================================================= */

code {
    padding: 0.12em 0.35em;

    background: var(--gray-light);

    border-radius: 3px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .track {
        grid-template-columns: 220px 1fr;
    }

    .mixer {
        grid-column: 1 / -1;

        display: grid;
        grid-template-columns: repeat(3, 1fr);

        border-top: 1px solid var(--gray);
    }

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


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 760px) {

    .app-shell {
        width: 96vw;
    }

    .hero {
        align-items: flex-start;
    }

    .hero-mark {
        display: none;
    }

    .transport .btn {
        flex: 1 1 42%;
    }

    .control-grid,
    .lower-grid {
        grid-template-columns: 1fr;
    }

    .control-block + .control-block,
    .midi-box {
        border-top: 1px solid var(--gray);
        border-right: 0;
        border-left: 0;
    }

    .track {
        display: block;
    }

    .track-head {
        border-right: 0;
        border-bottom: 1px solid var(--gray);
    }

    .wave-wrap {
        height: 210px;
    }

    .mixer {
        display: grid;
        grid-template-columns: 1fr;
    }

    .midi-map,
    .lexicon-grid {
        grid-template-columns: 1fr;
    }

    .visual-metro {
        gap: 22px;
    }
}