/* -------------------------------------------------------------------
   1) FARBVARIABLEN
   -------------------------------------------------------------------
   Mit "--name: wert;" innerhalb von :root definierst du eine
   Variable, die du überall im Rest der Datei mit var(--name)
   wieder abrufen kannst. :root bedeutet "gilt für die ganze Seite".
   Vorteil: Ändert sich z.B. dein Lieblingsfarbton, reicht EINE
   Änderung hier oben, statt zig Stellen im Code zu durchsuchen. */
:root {
    --bg:            #f3e3f6;  /* Seitenhintergrund (helles Flieder) */
    --box-bg:        #fdf6ea;  /* Hintergrund der Inhaltsbox (warmes Creme) */
    --main:          #8a1155;  /* Hauptfarbe: dein Rotlila */
    --main-dark:     #5c0c39;  /* dunklere Variante, für Ränder/Schatten */
    --accent-pink:   #d9709e;  /* Kontrastfarbe 1: Pink */
    --accent-blue:   #9088c9;  /* Kontrastfarbe 2: Blau-Lila */
    --accent-gold:   #dfc069;  /* Kontrastfarbe 3: Gold */
    --text-on-main:  #fdf6ea;  /* helle Schrift für dunkle Flächen */
}


/* -------------------------------------------------------------------
   2) GRUNDLAYOUT
   -------------------------------------------------------------------
   "html" und "body" sind die äußersten Bausteine jeder Webseite.
   Ein CSS-Regel-Block sieht immer so aus:

       auswahl {
           eigenschaft: wert;
           eigenschaft: wert;
       }

   "auswahl" nennt man Selektor - er sagt, WELCHES Element gemeint
   ist. "html" wählt das ganze Dokument, "body" den sichtbaren
   Seiteninhalt. */
* {
    box-sizing: border-box;
}

html {
    background-color: var(--bg);
    font-family: cursive;
    color: var(--main);
    text-align: center;
    overflow-x: hidden;
    /* Sternchen-Muster als Hintergrund, rein aus CSS erzeugt -
       keine Bilddatei nötig. Zwei sich überlagernde Punktraster
       in unterschiedlicher Größe. */
    background-image:
        radial-gradient(circle, #ffffff99 1px, transparent 1px),
        radial-gradient(circle, #ffffff55 1px, transparent 1px);
    background-size: 40px 40px, 25px 25px;
    background-position: 0 0, 12px 12px;
}

body {
    margin: auto;
    max-width: 100%;
}


/* -------------------------------------------------------------------
   3) DIE INHALTSBOX
   -------------------------------------------------------------------
   "#mainbox" mit Raute (#) wählt NICHT einen HTML-Tag, sondern ein
   Element mit id="mainbox" - also genau die eine <div id="mainbox">,
   die in jeder deiner Seiten den Inhalt umrahmt. IDs sind für
   einzigartige Elemente gedacht (nur einmal pro Seite verwendet). */
#mainbox {
    border: var(--main) 7px;
    border-style: dashed;
    width: 650px;
    max-width: 94%;
    margin: 10px auto;
    padding: 15px;
    background-color: var(--box-bg);
    box-sizing: border-box;
}


/* -------------------------------------------------------------------
   4) LINKS UND BILDER
   -------------------------------------------------------------------
   "a" wählt alle <a>-Links auf der Seite (ohne # oder . davor, weil
   es ein normaler HTML-Tag-Name ist, kein id oder class). */
a {
    color: var(--accent-pink);
}

img {
    max-width: 100%;
    border: 3px solid var(--main);
    margin: 6px 0;
}


/* -------------------------------------------------------------------
   5) NAVIGATION (Button-Leisten)
   -------------------------------------------------------------------
   "class" ist wie eine ID, aber wiederverwendbar - beliebig viele
   Elemente können dieselbe class="..." tragen. Deshalb: mit einem
   Punkt (.) statt Raute geschrieben. Hier: nav a heißt "jeder
   <a>-Link, der sich INNERHALB eines <nav>-Elements befindet" -
   so kriegen Navigations-Links ein anderes Aussehen als normale
   Fließtext-Links, ohne dass du jedem Link einzeln eine class
   geben musst. */
nav {
    display: flex;          /* ordnet die Kind-Elemente nebeneinander an */
    flex-wrap: wrap;        /* bricht in eine neue Zeile um, wenn kein Platz mehr ist */
    justify-content: center;
    gap: 8px;                /* Abstand zwischen den Buttons */
    margin: 12px 0;
}
nav a {
    display: inline-block;
    background-color: var(--bg);
    border: 2px solid var(--main);
    padding: 6px 14px;
    text-decoration: none;   /* entfernt die Standard-Unterstreichung */
    font-weight: bold;
    color: var(--main);
}
/* ":hover" ist ein "Pseudo-Selektor" - eine Regel, die nur greift,
   solange die Maus über dem Element schwebt. */
nav a:hover {
    background-color: var(--main);
    color: var(--text-on-main);
}


/* -------------------------------------------------------------------
   6) BLINKIES (nur auf der Startseite benutzt, schadet aber nicht,
      wenn die Regel hier für alle Seiten bereitliegt)
   ------------------------------------------------------------------- */
.blinkies {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 10px 0;
}
.blinkie {
    width: 88px;
    height: 31px;
    color: var(--text-on-main);
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--main-dark);
    text-align: center;
    line-height: 1.1;
}
.blinkie.c-main { background-color: var(--main); }
.blinkie.c-pink { background-color: var(--accent-pink); }
.blinkie.c-blue { background-color: var(--accent-blue); }
.blinkie.c-gold { background-color: var(--accent-gold); color: var(--main-dark); }


/* -------------------------------------------------------------------
   7) MARQUEE, BLINK-TEXT, BESUCHERZÄHLER, TRENNLINIEN
   ------------------------------------------------------------------- */
.marquee {
    overflow: hidden;
    white-space: nowrap;
    background-color: var(--main);
    color: var(--text-on-main);
    padding: 6px;
    font-weight: bold;
    border: 2px dotted var(--text-on-main);
}
.marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee-scroll 14s linear infinite;
}
@keyframes marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.blink {
    animation: blinker 1s linear infinite;
}
@keyframes blinker {
    50% { opacity: 0; }
}

#counter {
    font-family: 'Courier New', monospace;
    background: #000;
    color: #0f0;
    display: inline-block;
    padding: 4px 10px;
    letter-spacing: 3px;
    border: 2px inset var(--accent-gold);
}

hr.divider {
    border: none;
    border-top: 3px dashed var(--main);
    width: 80%;
    margin: 18px auto;
}

footer {
    margin-top: 15px;
}

.usage-note {
    font-size: 0.75em;
    font-style: italic;
    font-weight: normal;
    line-height: 1.4;
    color: var(--main-dark);
    opacity: 0.7;
    max-width: 92%;
    margin: 0 auto;
}


/* =====================================================================
   8) DESKTOP-MODUS (Icons, Fenster, Taskbar)
   =====================================================================
   Dieser Block gehört zur neuen "Desktop"-Startseite. Er benutzt
   dieselben Variablen (--main, --bg, ...) von ganz oben, damit die
   Fenster farblich zum Rest der Seite passen. */

/* Der Desktop selbst füllt den ganzen sichtbaren Bereich (100vh =
   100% der Bildschirmhöhe, "viewport height"). overflow: hidden
   verhindert, dass beim Verschieben von Fenstern Scrollbalken
   auftauchen. */
.desktop {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: var(--bg);
    background-image:
        radial-gradient(circle, #ffffff99 1px, transparent 1px),
        radial-gradient(circle, #ffffff55 1px, transparent 1px);
    background-size: 40px 40px, 25px 25px;
    background-position: 0 0, 12px 12px;
    text-align: left;
    font-family: cursive;
}

/* Icons stehen wie am echten Desktop in einer Spalte oben links.
   "position: absolute" + "top/left" auf jedem einzelnen Icon (im
   HTML per style="top:...;left:...") platziert sie frei. */
.icon {
    position: absolute;
    width: 80px;
    text-align: center;
    cursor: pointer;
    user-select: none; /* verhindert, dass beim Doppelklick Text markiert wird */
}
.icon .icon-glyph {
    font-size: 34px;
    display: block;
    background-color: var(--box-bg);
    border: 2px solid var(--main);
    border-radius: 8px;
    padding: 6px;
    margin-bottom: 4px;
}
.icon .icon-label {
    display: inline-block;
    background-color: var(--main);
    color: var(--text-on-main);
    font-size: 12px;
    padding: 1px 4px;
    border-radius: 3px;
}
.icon:hover .icon-glyph {
    background-color: var(--accent-pink);
}

/* Ein Fenster ist ebenfalls "position: absolute", damit JavaScript
   es per style.left/style.top frei auf dem Desktop verschieben kann.
   "display: none" heißt: unsichtbar UND nimmt keinen Platz ein - so
   startet jedes Fenster geschlossen, bis JS es öffnet. */
.window {
    position: absolute;
    display: none;
    flex-direction: column;
    width: 380px;
    min-width: 220px;
    min-height: 180px;
    background-color: var(--box-bg);
    border: 3px solid var(--main);
    box-shadow: 4px 4px 0 var(--main-dark);
}
.window.open {
    display: flex; /* JS schaltet zwischen "display:none" und dieser Klasse um */
}

.window-titlebar {
    background-color: var(--main);
    color: var(--text-on-main);
    padding: 6px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    cursor: move; /* zeigt der Maus: "hier kann man ziehen" */
}
.window-buttons button {
    background-color: var(--box-bg);
    color: var(--main);
    border: 1px solid var(--text-on-main);
    width: 20px;
    height: 20px;
    font-weight: bold;
    cursor: pointer;
    margin-left: 3px;
}

.window-content {
    padding: 12px;
    overflow-y: auto;
    color: var(--main);
}
.window-content nav {
    margin: 8px 0;
}

/* Die Taskbar klebt unten fest am Bildschirmrand ("position: fixed"
   statt "absolute" - fixed bezieht sich immer auf das Browserfenster,
   nicht auf ein Eltern-Element). */
.taskbar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40px;
    background-color: var(--main-dark);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    box-sizing: border-box;
}
.taskbar-btn {
    background-color: var(--main);
    color: var(--text-on-main);
    border: 1px solid var(--accent-gold);
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
}
.taskbar-btn.active {
    background-color: var(--accent-gold);
    color: var(--main-dark);
}
.taskbar-clock {
    margin-left: auto;
    color: var(--text-on-main);
    font-family: 'Courier New', monospace;
    font-size: 13px;
}


/* =====================================================================
   9) MOBILE / KLEINE BILDSCHIRME
   =====================================================================
   Media Queries greifen nur, wenn die Bedingung in der Klammer
   zutrifft - hier: Bildschirmbreite von 600px oder weniger. So
   bekommen Handys ein etwas kompakteres Layout, ohne dass sich am
   Desktop-Erscheinungsbild etwas ändert. */
@media (max-width: 600px) {
    #mainbox {
        max-width: 100%;
        margin: 6px auto;
        padding: 10px;
        border-width: 4px;
    }

    h1 {
        font-size: 1.4em;
    }

    h2 {
        font-size: 1.15em;
    }

    nav {
        gap: 6px;
    }

    nav a {
        padding: 6px 10px;
        font-size: 0.9em;
    }

    .marquee {
        font-size: 0.9em;
    }

    .window {
        width: 92vw;
        min-width: 0;
    }
}