:root {
    /* Theme Colors - Purple/Violet Palette 
    Quelle: https://www.w3schools.com/w3css/w3css_color_generator.asp
 */
    --primary: #6b5b95;
    --primary-hover: #8879ad;
    --primary-light: #a59ac1;
    --primary-lighter: #c3bcd6;
    --primary-lightest: #e1ddea;
    --primary-dark: #615286;
    --primary-darker: #564977;
    --primary-darkest: #362e4a;

    --text: #333;
    --bg-main: #f6f5f9;

    --success: #4caf50;
    --error: #c62828;

    --shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.2);

    --terminal-bg: #263238;
    --terminal-header: #37474f;
    --terminal-text: #eceff1;
    --terminal-prompt: #aed581;

    --box-quiz-bg: rgba(227, 221, 234, 0.4);

    --feedback-correct-bg: #c8e6c9;
    --feedback-correct-border: #2e7d32;

    --feedback-wrong-bg: #ffebee;
    --feedback-wrong-border: #c62828;

    --feedback-neutral-bg: #f6f5f9;
    --feedback-neutral-border: #8879ad;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Courier New', Courier, monospace;
    margin: 0;
    padding: 0;
    background-color: var(--bg-main);
    color: var(--text);
    font-size: 16px;
    overflow-x: hidden;
}

/* Title Elemente*/
h1,
h2,
h3,
h4 {
    font-family: Lato, sans-serif;
}

h1,
h2,
.introduction p,
.umrechner-link {
    text-align: center;
}

h1 {
    font-size: 2rem;
    margin: 0;
    line-height: 1.2;
}

h4 {
    margin-top: 0;
}

b,
.prog h4,
.umrechner-link p {
    font-weight: bold;
}

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

footer {
    background-color: var(--primary);
    color: white;
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
}

header {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

}

.head {
    text-align: center;
    padding: 1rem;
}


.content h2 {
    background-color: var(--primary);
    color: white;
    padding: 0.5rem;
    border-radius: 4px;
}

main {
    padding: 1rem;
    font-size: 1.0rem;
}

main>.box {
    margin: 1rem 0;
}

summary {
    cursor: pointer;
    font-weight: bold;
    padding: 0.5rem;
}

/* Navigation Styles */
main-nav {
    display: block;
}

nav {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 1000;
    align-items: flex-start;
    background-color: var(--primary);
    padding: 0.5rem;
    flex-direction: column;
}

#navLinks {
    display: none;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 0.5rem;
}

#navLinks.open {
    display: flex;
}

#navLinks a {
    text-decoration: none;
    color: white;
    padding: 0.8rem 1rem;
    display: block;
    border-radius: 4px;
}

#navLinks.open a:first-child {
    margin-top: 0.5rem;
}

#navLinks a:hover {
    background-color: var(--primary-hover);
}

.icon {
    font-size: 2rem;
    color: white;
    cursor: pointer;
    background-color: transparent;
    border: none;
    margin: 0;
}

.icon:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

/*Grid und Container Elemente*/

.base-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.gatter-visuell {
    margin: 1rem 0;
}

.surface {
    background-color: white;
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 1.5rem;
}


.vergleich-box {
    grid-column: 1 / -1;
}

.content-box {
    margin: 2rem 0;
    padding: 2rem;
    background-color: white;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.card {
    text-decoration: none;
    color: black;
    font-weight: 550;
    opacity: 0.8;
    background-size: cover;
    background-position: center;
}

.analogie-karte {
    border-left: 4px solid var(--primary-dark);
    background-color: var(--primary-lighter);
}

.card>* {
    background-color: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 4px;
    backdrop-filter: blur(2px);
}

.analogie-karte h4 {
    color: var(--primary-dark);
    font-size: 1.2rem;
}

/* Box-Varianten */
.box {
    padding: 1rem;
    border-radius: 8px;
    box-shadow: var(--shadow);
    background-color: var(--box-quiz-bg);
    border-left: 4px solid var(--primary);
}

.box--share {
    text-align: center;
    margin-bottom: 2rem;
}

.box--info {
    background-color: var(--feedback-neutral-bg);
    border-left: 4px solid var(--primary-dark);
}

.box ul,
.peripherie-karte ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.box li {
    margin-bottom: 0.8rem;
    line-height: 1.6;
}

/* Button Styles */

button {
    background-color: var(--primary);
    color: white;
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
}


.button-gruppe {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

select {
    padding: 0.5rem;
    margin: 0.5rem 0;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 1rem;
    cursor: pointer;
}

.builder-option select {
    padding: 0.8rem;
    background-color: white;
}

/* Quiz Box Styles */

.box-quiz-result {
    padding: 0.5rem;
    margin-top: 1rem;
    border-radius: 4px;
}

.is-correct {
    background-color: var(--feedback-correct-bg);
    border-left: 4px solid var(--feedback-correct-border);
}

.is-wrong {
    background-color: var(--feedback-wrong-bg);
    border-left: 4px solid var(--feedback-wrong-border);
}

.is-neutral {
    background-color: var(--feedback-neutral-bg);
    border-left: 4px solid var(--feedback-neutral-border);
}

.quiz-fieldset {
    border: none;
    padding: 0;
}

.quiz-question {
    margin-bottom: 1rem;
    padding: 0;
    font-size: 1.3rem;
}

.quiz-fieldset label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    line-height: 1.4;
}

.quiz-fieldset input[type="radio"] {
    margin-top: 0.2rem;
    accent-color: var(--primary);
}

.quiz-fieldset label:hover {
    background-color: var(--primary-lightest);
    border-radius: 4px;
}

.hidden {
    display: none;
}

/* class=card background  */

#hardware {
    background-image: url("img/hardwarebg.jpg");
}

#zahlensysteme {
    background-image: url("img/binarybg.jpg");
}

#linux-terminal {
    background-image: url("img/linuxbg.jpg");
}

#programmierung {
    background-image: url("img/progbg.jpg");
}

#algorithmen {
    background-image: url("img/algobg.jpg");
}

#logikschaltungen {
    background-image: url("img/logikbg.svg");
    /* <a href="https://commons.wikimedia.org/wiki/File:Cascaded-AND-OR-diode-logic.svg">Em3rgent0rdr</a>, CC0, via Wikimedia Commons */
}

/* Table Style */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    table-layout: fixed;
}

th {
    background-color: var(--primary);
    color: white;
    padding: 0.7rem;
    text-align: center;
}

td {
    text-align: center;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    border-bottom: 1px solid #ddd;
    padding: 0.7rem;
}

.th-mobile {
    display: inline;
}

.th-desktop {
    display: none;
}

.wahrheitstabelle td {
    border: 1px solid #ddd;
}

/* Input Felder*/
input {
    border-radius: 4px;
    padding: 0.8rem;
    font-size: 1rem;
    border: 2px solid var(--primary-lighter);
    box-sizing: border-box;
}

label {
    display: block;
    color: var(--primary-darker);
}

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

input:focus {
    outline: none;
    border-color: var(--primary-darker);
}

.zahlensystem-input,
.gatter-inputs,
.challenge-input {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.info {
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
}

.gatter-inputs {
    margin-bottom: 1rem;
}

.gatter-inputs label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    cursor: pointer;
}

.prog label,
.zahlenraten-spiel label,
.challenge-input label,
.builder-option label {
    display: block;
    margin-bottom: 1rem;
    font-weight: bold;
}

.prog input,
.challenge-input input,
.zahlenraten-spiel input {
    width: 100%;
    margin-top: 0.5rem;
    box-sizing: border-box;
}

.challenge-input {
    margin: 1rem 0;
}

.challenge-input input {
    max-width: 400px;
    border: 2px solid #ddd;
    margin-bottom: 0.5rem;
}

/* terminal */
.terminal-input-line {
    background-color: var(--terminal-bg);
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    border-top: 1px solid var(--terminal-header);
}

.terminal-input {
    background-color: transparent;
    border: none;
    color: var(--terminal-text);
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
    flex: 1;
    outline: none;
}

.terminal-input::placeholder {
    color: #78909c;
    font-size: 0.8rem;
}

/*zahlensysteme */
.calculation {
    background-color: #f5f5f5;
    padding: 1rem;
    border-radius: 4px;
}

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

/* Logikschaltungen Seite */

.gatter-regel {
    background-color: var(--primary-lighter);
    padding: 1rem;
    border-radius: 4px;
    border-left: 4px solid var(--primary);
    font-size: 1.1rem;
}

.interaktiv-gatter {
    background-color: var(--primary-lightest);
    padding: 1rem;
    border-radius: 8px;
    border: 2px solid var(--primary);
    margin-top: 1rem;
}

.gatter-output {
    background-color: var(--error);
    color: white;
    padding: 0.8rem;
    border-radius: 4px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold;
    transition: background-color 0.3s;
}

.gatter-output .is-active {
    background-color: var(--success);
}

.gatter-output-large {
    font-size: 1.2rem;
    padding: 1rem;
}


.schaltung-beispiel {
    background-color: var(--primary-lightest);
}

.container h2 {
    color: var(--primary);
    background: inherit;
}

/* Programmierung Seite */

pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: #f4f6f8;
    padding: 1rem;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.code-beispiel code {
    font-family: "Fira Code", monospace;
    font-size: 0.95rem;
    line-height: 1.5;
}

.prog {
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1rem 0;
}

#versuche-anzeige {
    font-weight: bold;
    margin-top: 1rem;
}

/* linux */
.terminal-concepts {
    margin: 2rem 0;
}

.command-card h4 {
    font-size: 1.2rem;
}

.command-card code {
    background-color: var(--terminal-bg);
    color: var(--terminal-prompt);
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
}

.terminal-simulator {
    background-color: var(--terminal-bg);
    border-radius: 8px;
    overflow: hidden;
    margin: 1rem 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.terminal-header {
    background-color: var(--terminal-header);
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
}

.terminal-title {
    color: var(--terminal-text);
    font-size: 0.9rem;
    font-weight: bold;
}

.terminal-output {
    background-color: var(--terminal-bg);
    color: var(--terminal-text);
    padding: 1rem;
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
}

.terminal-line {
    margin-bottom: 0.3rem;
    line-height: 1.4;
}

.terminal-prompt {
    color: var(--success);
    font-weight: bold;
}

.terminal-task {
    background-color: white;
    padding: 0.5rem;
    border-radius: 8px;
}

.command-card code,
.terminal-task code {
    background-color: var(--terminal-bg);
    color: var(--terminal-prompt);
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
}

.box>h2,
.components-overview>h2 {
    color: var(--primary);
    background-color: transparent;
    margin: 0;
}

.components h3,
.components h4 {
    color: var(--primary);
}

.highlight {
    background-color: var(--primary-lighter);
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-weight: bold;
}

.highlight-row {
    background-color: var(--primary-lightest);
    font-weight: bold;
}

.computer-builder {
    margin-top: 1rem;
}

.peripherie-karte {
    background-color: #f5f5f5;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid var(--primary);
}

.box h3 {
    margin-top: 0;
    color: var(--primary);
}


/*media share styling*/
.fa,
#copy-btn {
    padding: 20px;
    text-align: center;
    text-decoration: none;
    color: white;
    border-radius: 0;
}

.fa-facebook {
    background: #3B5998;
}

.fa-whatsapp {
    background: #25D366;
}

.fa-telegram {
    background: #0088cc;
}

.fa-envelope {
    background: #dd4b39;
}

.box--share a {
    font-size: 20px;
}

.box--share h3 {
    color: var(--primary-darker);
}

.box--share p {
    margin: 0;
}

/* Timeline Items */
.timeline-item {
    margin-bottom: 3rem;
    position: relative;
}

.timeline-content {
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid var(--primary);
    box-shadow: var(--shadow);
}


.timeline-date {
    grid-area: date;
    background-color: var(--primary);
    justify-self: start;
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
}

.timeline-content h3 {
    grid-area: title;
    margin: 0.5rem 0 0.3rem 0;
    color: var(--primary);
    font-size: 1.3rem;
}

.timeline-content h4 {
    grid-area: subtitle;
    margin: 0 0 0.8rem 0;
    color: var(--primary-light);
    font-size: 1rem;
    font-weight: normal;
    font-style: italic;
}

.description {
    grid-area: description;
    color: #555;
    line-height: 1.3;
}

.timeline-content p {
    margin: 10px 0;
}

.timeline-content details {
    margin-top: 1rem;
    padding: 0.8rem;
    background-color: #f9f9f9;
    border-radius: 4px;
    border-left: 3px solid var(--primary);
}

.timeline-content summary {
    cursor: pointer;
    font-weight: bold;
    color: var(--primary);
    padding: 0.3rem;
    user-select: none;
}

/* Hide timeline line on mobile */
.timeline-line {
    display: none;
}

/* Pioneers Section */
.pioneers-section {
    margin: 4rem 0 2rem 0;
    padding: 0 1rem;
}

.pioneer-role {
    display: inline-block;
    background-color: var(--primary-dark);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.85rem;
    margin-bottom: 0.8rem;
}

/* Responsive Design - Tablets & Desktops */
@media screen and (min-width: 768px) {

    /* Navigation */
    nav button.icon,
    nav a.icon {
        display: none;
    }

    #navLinks {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        width: auto;
    }

    nav {
        flex-direction: row;
        justify-content: center;
    }

    #navLinks a {
        background-color: transparent;
        border-radius: 0;
    }

    #navLinks a:hover {
        background-color: var(--primary-hover);
    }

    /* Allgemeine Grid-Layouts */
    .base-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .th-mobile {
        display: none;
    }

    .th-desktop {
        display: inline;
    }

    .grid-layout {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 1rem;
    }

    .content-box {
        grid-template-columns: 300px 1fr;
    }

    .timeline-section {
        padding: 0 2rem;
    }

    .timeline-container {
        padding: 2rem 0 2rem 2rem;
    }

    /* Show timeline line */
    .timeline-line {
        display: block;
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient(to bottom, var(--primary-darkest), var(--primary-lightest));
        transform: translateX(-50%);
    }

    /* Alternate left/right layout */
    .timeline-left .timeline-content {
        margin-right: calc(50% + 2rem);
    }

    .timeline-right .timeline-content {
        margin-left: calc(50% + 2rem);
    }

    /* Add dots on timeline */
    .timeline-item::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        width: 20px;
        height: 20px;
        background-color: var(--primary);
        border: 4px solid white;
        border-radius: 50%;
        transform: translateX(-50%);
        box-shadow: 0 0 0 4px var(--primary);
        z-index: 1;
    }

    /* Date positioning */
    .timeline-left .timeline-date {
        position: relative;
    }

    .timeline-right .timeline-date {
        position: relative;
    }


}

/* Responsive Design - Large Desktops */
@media screen and (min-width: 1200px) {

    .grid--md {
        grid-template-columns: repeat(3, 1fr);
    }

    .timeline-section {
        margin: 3rem 0;
        padding: 0 1rem;
    }

    .timeline-content {
        display: grid;
        column-gap: 1em;
        grid-template: 'date date'
            'title title'
            'subtitle subtitle'
            'picture description';
        grid-template-columns: 1fr 1fr;
    }

    .timeline-left .timeline-content {
        margin-right: calc(50% + 3rem);
    }

    .timeline-right .timeline-content {
        margin-left: calc(50% + 3rem);
    }

    .timeline-item::before {
        width: 24px;
        height: 24px;
        border: 5px solid white;
    }

    button:hover,
    .fa:hover,
    .card:hover {
        background-color: var(--primary-hover);
        transform: translateY(-2px);
    }

    /* Algorithmen-Seite */
    .grid--lg {
        grid-template-columns: repeat(4, 1fr);
    }

    .content-box {
        grid-template-columns: 350px 1fr;
    }

    .components-overview {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .components-overview>h2,
    .components-overview>.intro,
    section>h2 {
        grid-column: 1 / -1;
        text-align: center;
    }

    .components-overview>.pic {
        grid-column: 1;
    }

    .components-overview>.components {
        grid-column: 2;
    }

    .components-overview>section {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .components-overview>section>.pic {
        grid-column: 1;
    }

    .pic>img {
        border-radius: 6px;
        object-fit: contain;
    }

    .components-overview>section>.components {
        grid-column: 2;
    }

    .pic {
        grid-area: picture;
        font-size: 0.8rem;
    }

    .timeline-image {
        border-radius: 6px;
        object-fit: fill;
    }

    .intro-geschichte {
        margin: 2rem 0;
    }

    .timeline-container {
        position: relative;
        max-width: 1500px;
        margin: 0 auto;
        padding: 2rem 0;
    }

    .timeline-content:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-hover);
    }
}