:root {
    --c-black: #000000;
    --c-void: #0a0a14;
    --c-white: #f5f5f5;
    --c-gray: #888888;

    --c-electric-blue: #0087ff;
    --c-neon-cyan: #00ffff;
    --c-bright-cyan: #5fffff;

    --c-neon-pink: #ff00d7;
    --c-hot-pink: #ff5faf;
    --c-neon-magenta: #ff00ff;

    --c-neon-yellow: #ffff87;
    --c-neon-green: #87ff00;

    --color-logo: var(--c-neon-cyan);
    --color-menu: var(--c-neon-pink);
    --color-menu-selected: var(--c-bright-cyan);
    --color-info: var(--c-electric-blue);
    --color-warning: var(--c-neon-yellow);
    --color-accent: var(--c-hot-pink);
    --color-generated: var(--c-neon-magenta);
    --color-connected: var(--c-neon-green);
    --color-body-text: #d6faff;
}


/* --------------------------------------------------
   BASIC
-------------------------------------------------- */

* {
    box-sizing: border-box;
}

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

body {
    background:
        radial-gradient(
            ellipse at 50% -10%,
            var(--c-void) 0%,
            var(--c-black) 60%
        );

    color: var(--color-body-text);

    font-family:
        "Courier New",
        Courier,
        monospace;

    line-height: 1.4;

    display: flex;
    flex-direction: column;

    min-height: 100vh;
}


/* --------------------------------------------------
   HEADER
-------------------------------------------------- */

header {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 1rem;

    padding:
        1.5rem
        1rem
        1rem;

    border-bottom:
        2px solid
        var(--color-info);

    background: rgba(0, 0, 0, 0.35);
}
/* --------------------------------------------------
   SVG LOGO
-------------------------------------------------- */

.logo-wrapper {
    width: 100%;

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

    overflow: hidden;
}

.logo {
    width: min(900px, 100%);
    margin: 0 auto;

    color: var(--color-logo);

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

    transition:
        color 2.5s ease-in-out,
        opacity 2.5s ease-in-out;
}

.logo svg {
    display: block;

    width: 100%;
    height: auto;

    max-width: 900px;

    color: currentColor;

    transform: none;
    filter: none;

    /*
     * Nur sehr wenig Opazitätsvariation.
     * Die Konturen bleiben gestochen scharf.
     */
    opacity: 1;

    transition:
        opacity 2.5s ease-in-out,
        color 2.5s ease-in-out;
}


/*
 * Nur ein ganz leichtes "Atmen".
 */

.logo.logo-blink {
    opacity: 0.92;
}

.logo:not(.logo-blink) {
    opacity: 1;
}



/* --------------------------------------------------
   NAVIGATION
-------------------------------------------------- */

nav {
    display: flex;

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

    gap: 0.6rem;

    width: 100%;
    max-width: 900px;
}

.tab-button {
    flex: 1;

    min-width: 0;

    padding:
        0.65rem
        0.8rem;

    border:
        1px solid
        var(--color-menu);

    background: transparent;

    color: var(--color-menu);

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 0.85rem;

    cursor: pointer;

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.tab-button:hover {
    color: var(--color-menu-selected);

    border-color:
        var(--color-menu-selected);
}

.tab-button.active {
    color: var(--c-black);

    background:
        var(--color-menu-selected);

    border-color:
        var(--color-menu-selected);
}


/* --------------------------------------------------
   MAIN LAYOUT
-------------------------------------------------- */

.container {
    display: flex;

    flex: 1;

    gap: 1.5rem;

    width: 100%;

    padding: 1.5rem;
}


/* --------------------------------------------------
   SIDEBAR
-------------------------------------------------- */

.sidebar {
    flex: 0 0 340px;

    width: 340px;

    height: 70vh;

    overflow: hidden;

    border:
        1px solid
        var(--color-info);

    background:
        rgba(0, 0, 0, 0.35);

    padding: 1rem;
}

.autoscroll {
    height: 100%;

    overflow: hidden;
}

#autoscroll-text {
    margin: 0;

    white-space: pre-wrap;
    word-break: break-word;

    color: var(--color-info);
}


/* --------------------------------------------------
   CONTENT
-------------------------------------------------- */

.content {
    flex: 1;

    min-width: 0;

    width: 100%;
}

.tab-content {
    display: none;

    width: 100%;
}

.tab-content.active {
    display: block;
}


/*
 * Textbereiche dürfen sich vollständig an
 * die verfügbare Fensterbreite anpassen.
 */

.tab-content pre {
    width: 100%;

    max-width: 100%;

    margin: 0;

    white-space: pre-wrap;
    overflow-wrap: anywhere;

    color: var(--color-body-text);
}


/* --------------------------------------------------
   AUTOPOET
-------------------------------------------------- */

#autopoem-button,
#back-button {
    padding:
        0.7rem
        1rem;

    border:
        1px solid
        var(--color-generated);

    background: transparent;

    color:
        var(--color-generated);

    font-family:
        "Courier New",
        Courier,
        monospace;

    cursor: pointer;
}

#autopoem-button:hover,
#back-button:hover {
    background:
        var(--color-generated);

    color:
        var(--c-black);
}

#autopoem-display {
    margin-top: 1.5rem;

    width: 100%;
}

#autopoem-display img {
    display: block;

    max-width: 100%;
    height: auto;

    margin: 0 auto 1rem;
}

.autopoem-empty {
    color: var(--color-warning);
}


/* --------------------------------------------------
   FAMILY FORM
-------------------------------------------------- */

#email-form {
    display: flex;

    flex-wrap: wrap;

    gap: 0.6rem;

    margin-top: 1rem;
}

#email-input {
    flex: 1;

    min-width: 200px;

    padding: 0.7rem;

    border:
        1px solid
        var(--color-accent);

    background: transparent;

    color: var(--color-body-text);

    font-family:
        "Courier New",
        Courier,
        monospace;
}

#email-input::placeholder {
    color: var(--c-gray);
}

#email-form button {
    padding:
        0.7rem
        1rem;

    border:
        1px solid
        var(--color-accent);

    background: transparent;

    color: var(--color-accent);

    font-family:
        "Courier New",
        Courier,
        monospace;

    cursor: pointer;
}

#email-form button:hover {
    background:
        var(--color-accent);

    color:
        var(--c-black);
}


/* --------------------------------------------------
   AUDIO BUTTON
-------------------------------------------------- */

.play-sound-button {
    position: fixed;

    right: 1rem;
    bottom: 1rem;

    z-index: 1000;

    padding:
        0.7rem
        1rem;

    border:
        1px solid
        var(--color-connected);

    background:
        var(--c-black);

    color:
        var(--color-connected);

    font-family:
        "Courier New",
        Courier,
        monospace;

    cursor: pointer;
}


/* --------------------------------------------------
   MOBILE
-------------------------------------------------- */

@media (max-width: 760px) {

    .container {
        flex-direction: column;

        padding: 1rem;
    }

    .sidebar {
        flex: none;

        width: 100%;

        height: 35vh;
    }

    .content {
        width: 100%;
    }

    .logo {
        width: 100%;
    }

}


/* --------------------------------------------------
   MOBILE NAVIGATION
-------------------------------------------------- */

@media (max-width: 600px) {

    header {
        padding:
            1rem
            0.6rem
            0.8rem;
    }

    nav {
        display: grid;

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

        grid-template-rows:
            auto auto;

        gap: 0.45rem;

        width: 100%;
        max-width: 100%;
    }


    /* row 1 */

    .tab-button:nth-child(1) {
        grid-column: 1 / span 3;
        grid-row: 1;
    }

    .tab-button:nth-child(2) {
        grid-column: 4 / span 3;
        grid-row: 1;
    }


    /* row 2 */

    .tab-button:nth-child(3) {
        grid-column: 1 / span 2;
        grid-row: 2;
    }

    .tab-button:nth-child(4) {
        grid-column: 3 / span 2;
        grid-row: 2;
    }

    .tab-button:nth-child(5) {
        grid-column: 5 / span 2;
        grid-row: 2;
    }


    .tab-button {
        width: 100%;

        min-width: 0;

        padding:
            0.55rem
            0.25rem;

        font-size:
            clamp(
                0.65rem,
                3vw,
                0.8rem
            );

        letter-spacing: 0.03em;

        white-space: nowrap;
    }

}


/* --------------------------------------------------
   VERY SMALL SCREENS
-------------------------------------------------- */

@media (max-width: 380px) {

    .container {
        padding: 0.7rem;
    }

    .sidebar {
        height: 30vh;
    }

    #email-form {
        flex-direction: column;
    }

    #email-input {
        width: 100%;
    }

}