/* --- Globale 90er-Jahre-Farbpalette & Typografie --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #008080; /* Das klassische Windows 95/98 Teal */
    font-family: "MS Sans Serif", "Courier New", Courier, monospace, sans-serif;
    color: #000000;
    padding: 20px;
    font-size: 14px;
    line-height: 1.4;
}

/* Zentrierter Seitencontainer, der wie ein altes Tabellenlayout wirkt */
.page-container {
    max-width: 800px;
    margin: 0 auto;
    background-color: #c0c0c0; /* Typisches Hellgrau für Oberflächen */
    border: 3px double #ffffff;
    box-shadow: 4px 4px 0px #000000;
    padding: 15px;
}

/* Header-Design */
header {
    background: linear-gradient(90deg, #000080, #1084d0); /* Windows-Fenster-Blau */
    color: #ffffff;
    padding: 15px;
    text-align: center;
    border: 2px inset #ffffff;
    margin-bottom: 20px;
}

header h1 {
    font-size: 28px;
    letter-spacing: 2px;
    text-shadow: 2px 2px #000000;
    margin-bottom: 5px;
}

.subtitle {
    font-style: italic;
    color: #ffcc00;
    font-weight: bold;
}

/* Ticker-Simulation */
.marquee-fallback {
    background-color: #000000;
    color: #00ff00; /* Matrix-Grün */
    font-family: monospace;
    padding: 4px;
    margin-top: 10px;
    font-size: 12px;
    text-transform: uppercase;
    border: 1px solid #808080;
}

/* Boxen im "Bevel"-Look (3D-Rahmeneffekt der 90er) */
.box {
    background-color: #ffffff;
    border: 2px inset #ffffff;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: inset 2px 2px 0px #808080;
}

.box h2 {
    background-color: #808080;
    color: #ffffff;
    font-size: 16px;
    padding: 3px 8px;
    margin-top: -15px;
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: 15px;
    border-bottom: 2px solid #000000;
    text-transform: uppercase;
}

/* Tabellen-Styling */
.retro-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #f0f0f0;
    table-layout: fixed;
}

.retro-table td {
    border: 1px solid #808080;
    padding: 8px;
    vertical-align: top;
    overflow-wrap: break-word;
}

.retro-table td.label {
    background-color: #dcdcdc;
    font-weight: bold;
    width: 30%;
}

.freeware-tag {
    background-color: #ff0000;
    color: #ffffff;
    padding: 2px 6px;
    font-weight: bold;
    border: 1px solid #000000;
}

/* Download-Bereich & Button */
.download-box {
    text-align: center;
    background-color: #ffffe0; /* Leichtes Retro-Gelb für Aufmerksamkeit */
}

.download-container {
    margin: 20px 0 10px 0;
}

.btn-download {
    display: inline-block;
    padding: 12px 25px;
    background-color: #000080;
    color: #ffffff !important;
    font-weight: bold;
    font-size: 16px;
    text-decoration: none;
    border: 3px outset #ffffff;
    box-shadow: 2px 2px 0px #000000;
}

.btn-download:hover {
    background-color: #0000ff;
}

.btn-download:active {
    border: 3px inset #ffffff;
    box-shadow: none;
}

.download-hint {
    font-size: 11px;
    color: #555555;
    margin-top: 8px;
    font-style: italic;
}

/* Links allgemein */
a {
    color: #0000ff;
    text-decoration: underline;
}

a:visited {
    color: #800080;
}

a:hover {
    color: #ff0000;
}

/* Footer & Rechtliches */
.email {
    font-size: 16px;
    font-weight: bold;
    margin-top: 5px;
}

.retro-hr {
    border: 0;
    height: 2px;
    background-color: #808080;
    border-bottom: 1px solid #ffffff;
    margin: 15px 0;
}

.disclaimer {
    font-size: 12px;
    margin-bottom: 10px;
}

.copyright {
    font-size: 11px;
    color: #404040;
    text-align: justify;
}

footer {
    text-align: center;
    font-size: 11px;
    color: #404040;
    margin-top: 15px;
    border-top: 1px solid #808080;
    padding-top: 5px;
}

/* Styling für das Vorschaubild in der Beschreibung */
.retro-image {
    float: left;            /* Text fließt rechts am Bild vorbei */
    margin-right: 15px;     /* Abstand zum Text */
    margin-bottom: 10px;    /* Abstand nach unten */
    border: 3px inset #ffffff; /* 3D-Effekt Rahmen */
    background-color: #c0c0c0;
    padding: 2px;
}

/* Container für sauberes Layout */
.description-content {
    overflow: hidden; /* Modernes Clearing für Floats */
}

/* Optional: Bild auf sehr kleinen Bildschirmen zentrieren statt floaten */
@media (max-width: 480px) {
    .retro-image {
        float: none;
        display: block;
        margin: 0 auto 15px auto;
    }
}