/* =========================================================================
   descent2.de — Stylesheet
   Farben, Schriften und Spaltenmasse sind 1:1 aus der Altsite uebernommen
   (std.css und menu.css). Die Frameset-Spalten werden hier durch ein
   CSS-Grid mit eigenstaendig scrollenden Bereichen ersetzt — optisch und
   im Scrollverhalten identisch, aber mit einer URL je Seite.
   ========================================================================= */

:root {
    /* Farben — exakt aus std.css / menu.css */
    --bg-page:        #242424;   /* body-Grundfarbe */
    --bg-tile:        #303030;   /* Grund unter der Hintergrundkachel */
    --bg-panel:       #282828;   /* abgesetzte Kaesten auf der Startseite */
    --bg-bar:         #000000;   /* Kopfleiste */
    --text:           #BCBCBC;
    --text-strong:    #FFFFFF;
    --head-large:     #B0B0B0;   /* H0-H3 */
    --head-small:     #A0A0A0;   /* H4 */
    --link:           orange;
    --link-hover:     red;
    --rule:           #606060;
    --accent:         #FF4000;   /* Ratings im Level-Spotlight */

    /* Menue */
    --menu-head-bg:   #000068;
    --menu-head-fg:   #FFFFFF;
    --menu-bg:        #FFFFFF;
    --menu-fg:        #000000;
    --menu-hover-bg:  #D0D0D0;

    /* Spaltenmasse — aus den frameset-Angaben der Altsite.
       Die linke Spalte ist gegenueber dem Original (140px) verbreitert, weil
       sonst die laengsten Menuebeschriftungen umbrechen. Die Kopfspalte geht
       mit, damit die senkrechte Kante durchlaeuft. */
    --col-left:       200px;
    --col-right:      200px;   /* so breit wie die Menuespalte links */
    --col-donate:     208px;
    --header-h:       74px;

    --font: "Verdana", "Arial", Helvetica, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: var(--font);
    font-weight: normal;
    font-size: 10pt;
    color: var(--text);
    background: var(--bg-tile) url('/images/background.gif') left top repeat;
    background-color: var(--bg-page);
}

/* -------------------------------------------------------------------------
   Gesamtraster: Kopfzeile fest, darunter drei eigenstaendig scrollende Spalten
   ------------------------------------------------------------------------- */

.site {
    display: grid;
    grid-template-rows: var(--header-h) 1fr;
    height: 100vh;
    overflow: hidden;
}

.site-header {
    display: grid;
    grid-template-columns: var(--col-left) 1fr var(--col-donate);
    height: var(--header-h);
    overflow: hidden;
}

.site-body {
    display: grid;
    grid-template-columns: var(--col-left) 1fr var(--col-right);
    min-height: 0;                 /* damit die Kinder scrollen statt zu wachsen */
}

/* Menue steht fest (Altsite: scrolling=NO), Inhalt und News scrollen (auto) */
.col-menu    { overflow: hidden; }
.col-content { overflow-y: auto; overflow-x: hidden; }
.col-news    { overflow-y: auto; overflow-x: hidden; }

/* Reicht der Platz fuer das Menue nicht, darf es doch scrollen —
   sonst waeren Eintraege auf niedrigen Fenstern unerreichbar. */
@media (max-height: 780px) {
    .col-menu { overflow-y: auto; }
}

/* -------------------------------------------------------------------------
   Kopfzeile
   ------------------------------------------------------------------------- */

.header-links {
    background: var(--bg-bar);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.header-links img { display: block; border: 0; max-width: 100%; }

.header-title {
    background: var(--bg-bar);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* title.html: linke Zelle class=TCL (linksbuendig), rechte class=TCR
   (rechtsbuendig), Mitte fix 214px. Die Seitenbilder kleben also an den
   Aussenkanten, nicht an der Mitte. */
.headerTitleSide {
    flex: 1 1 0;
    height: var(--header-h);
    background: url('/images/d2title-left.png') left center no-repeat;
    background-color: var(--bg-bar);
    min-width: 0;
}
.headerTitleSideRight {
    background-image: url('/images/d2title-right.png');
    background-position: right center;
}
.headerTitleLogo { flex: 0 0 214px; display: block; }
.headerTitleLogo img { display: block; width: 214px; height: 70px; border: 0; }

.header-donate {
    background: var(--bg-bar);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
.header-donate img { display: block; border: 0; }
.headerDonateFlags { display: flex; gap: 10px; }

/* -------------------------------------------------------------------------
   Seitenmenue — Farben und Groessen aus menu.css
   ------------------------------------------------------------------------- */

.menu { padding: 12px 0 20px; }

.menuBox {
    width: var(--col-left);
    margin: 0 auto;
    border: 1px solid var(--menu-fg);
    border-collapse: collapse;
    background: var(--menu-bg);
}

.menuHdr {
    color: var(--menu-head-fg);
    background: var(--menu-head-bg);
    font: bold 14px Verdana, sans-serif;
    text-align: center;
    padding: 2px 1px;
}

.menuList { list-style: none; margin: 0; padding: 0; }

.menuItem {
    color: var(--menu-fg);
    background: var(--menu-bg);
    font: 11px Verdana, sans-serif;
    padding: 1px 3px;
    border-top: 1px solid var(--menu-fg);
}
.menuItem a {
    color: var(--menu-fg);
    font: 11px Verdana, sans-serif;
    text-decoration: none;
    display: block;
}
.menuItem a:visited { color: var(--menu-fg); }
.menuItem:hover,
.menuItem a:hover { background: var(--menu-hover-bg); text-decoration: underline; }

.menuItemBold a, .menuItemBold { font-weight: bold; }
.menuItemSub  a { padding-left: 0; }
.menuItemSub  a::before { content: "\2013\00a0"; }   /* das – der Altsite */
.menuItemPlain { font-weight: bold; }                 /* Zwischenueberschrift ohne Link */

.menuPromo { width: var(--col-left); margin: 8px auto 0; text-align: center; }
.menuPromo img { border: 0; max-width: 100%; display: block; margin: 0 auto; }
.menuPromo p { color: var(--text-strong); font-size: 10pt; margin: 4px 0 0; }

/* -------------------------------------------------------------------------
   News-Spalte
   ------------------------------------------------------------------------- */

.news { padding: 10px 8px 24px; }
.newsTitle { text-align: center; color: var(--text-strong); }
.newsEntry { margin: 0 0 10px; }
.newsDate {
    font-family: var(--font);
    font-weight: bolder;
    font-size: 10.5pt;
    color: var(--text-strong);
    margin: 0 0 2px;
}
/* Keine Aufzaehlung und keine Einrueckung — siehe render_news(). */
.newsList { margin: 0; padding: 0; }
.newsList p { font-size: 8pt; margin: 0 0 3px; }

/* -------------------------------------------------------------------------
   Inhaltsbereich
   ------------------------------------------------------------------------- */

.content { padding: 8px 12px 40px; }
/* Keine Breitenbegrenzung — der Inhaltsbereich waechst mit dem Fenster,
   wie in der Altsite, wo die Tabellen mit Prozentbreiten arbeiten. */
.content > .inner { margin: 0; }

/* Ueberschriften: Groessen aus std.css. margin:0, weil die Altsite
   <ilayer> inline gerendert hat und den Abstand ueber <br>/<p> erzeugt. */
h1, h2, h3, h4, h5, h6 { font-family: var(--font); margin: 0; font-weight: bold; }
h1 { font-size: 36pt; color: var(--head-large); }
h2 { font-size: 24pt; color: var(--head-large); }
h3 { font-size: 18pt; color: var(--head-large); }
h4 { font-size: 14pt; color: var(--head-small); }
h5 { font-size: 12pt; color: var(--text-strong); }
h6 { font-size: 10.5pt; color: var(--text-strong); font-weight: bolder; }
.h0 { font-size: 48pt; color: var(--head-large); font-weight: bold; }
/* std.css definiert Ueberschriften doppelt: als Elementselektor H0-H7 mit
   #B0B0B0 und als ID-Selektor #H1-#H7 mit #A0A0A0 (ab H4 sind beide gleich).
   Die Altsite mischt beide Formen. Diese Klasse steht an den Ueberschriften,
   die dort <ilayer id="Hn"> waren und deshalb den dunkleren Ton tragen. */
h1.h-id, h2.h-id, h3.h-id { color: var(--head-small); }
.h7 { font-size: 10pt;  color: var(--text-strong); font-weight: bolder; }

p { font-family: var(--font); font-size: 10pt; color: var(--text); }

a         { font-family: var(--font); font-weight: bold; color: var(--link); text-decoration: none; }
a:visited { color: var(--link); }
a:hover   { color: var(--link-hover); text-decoration: underline overline; }
a:active  { color: var(--link); text-decoration: underline overline; }

img { border: 0; max-width: 100%; height: auto; }
/* Bilder, die in der Altsite border="1" trugen. Die Farbe kommt wie dort
   aus currentColor, in einem Link also die Linkfarbe; content-box, damit der
   Rahmen das Bild nicht verkleinert. Muss vor den Regeln stehen, die einzelne
   Bereiche eigene Rahmen geben (Startseite, Galerien). */
img.framed { border: 1px solid; box-sizing: content-box; }

hr { border: 0; border-top: 2px solid var(--rule); margin: 10px auto; }
/* Ersatz fuer die <hr>-Attribute der Altsite: align="left" und die duenne
   graue Variante. size="2", color="#606060" und noshade entsprechen bereits
   der Regel darueber. */
.hr-left { margin-left: 0; margin-right: auto; }
.hr-thin { border-top-width: 1px; border-top-color: #C0C0C0; }

/* Ersatz fuer <center> aus der Altsite. Das Element zentrierte auch
   Blockelemente (die Browser setzen dafuer text-align:-webkit-center),
   deshalb die zweite Regel — sonst rutschen Tabellen nach links. */
.center { text-align: center; }
.center > table, .center > div, .center > p { margin-left: auto; margin-right: auto; }

/* -------------------------------------------------------------------------
   Ersatz fuer die Praesentationsattribute der Altsite

   align/valign an Zellen, cellpadding/cellspacing/border/align an Tabellen
   und nowrap sind in HTML5 entfallen. Diese Klassen bilden sie eins zu eins
   nach; Breiten und Farben stehen als style am Element, weil ihre Werte
   individuell sind.
   ------------------------------------------------------------------------- */

.ta-l { text-align: left; }
.ta-c { text-align: center; }
.ta-r { text-align: right; }
.ta-j { text-align: justify; }
.va-t { vertical-align: top; }
.va-m { vertical-align: middle; }
.va-b { vertical-align: bottom; }
.nowrap { white-space: nowrap; }
/* Ersatz fuer <br clear="all"> */
.clear-both { clear: both; }

/* <table align=...>: zentriert die Tabelle bzw. laesst den Text daneben fliessen */
.tab-center { margin-left: auto; margin-right: auto; }
.tab-left   { float: left; }
.tab-right  { float: right; }
/* <table border="1"> rahmte im Browser die Tabelle *und* jede Zelle */
.tab-border { border: 1px outset; }
.tab-border > tbody > tr > td, .tab-border > tbody > tr > th,
.tab-border > tr > td, .tab-border > tr > th { border: 1px inset; }

/* cellspacing. Jede Tabelle traegt eine cs-Klasse, auch die ohne Attribut
   (cs-2 = Vorgabe des Browsers) — border-spacing wird sonst an
   verschachtelte Tabellen vererbt, cellspacing wurde das nie. */
.cs-0 { border-collapse: separate; border-spacing: 0; }
.cs-1 { border-collapse: separate; border-spacing: 1px; }
.cs-2 { border-collapse: separate; border-spacing: 2px; }
.cs-4 { border-collapse: separate; border-spacing: 4px; }

/* cellpadding wirkte nur auf die eigenen Zellen, nicht auf verschachtelte */
.cp-0 > tbody > tr > td, .cp-0 > tbody > tr > th, .cp-0 > tr > td, .cp-0 > tr > th { padding: 0; }
.cp-1 > tbody > tr > td, .cp-1 > tbody > tr > th, .cp-1 > tr > td, .cp-1 > tr > th { padding: 1px; }
.cp-2 > tbody > tr > td, .cp-2 > tbody > tr > th, .cp-2 > tr > td, .cp-2 > tr > th { padding: 2px; }

/* Ausrichtungsklassen der Altsite — die migrierten Inhalte nutzen sie weiter */
.TTL, .TTC, .TTR, .TBL, .TCC, .TCL, .TCR, .TTB, .TCB, .TBC {
    font-family: var(--font);
    font-size: 10pt;
    color: var(--text-strong);
}
.TTL, .TBL, .TCL { text-align: left; }
.TTC, .TCC       { text-align: center; }
.TTR, .TCR       { text-align: right; }
.TTB, .TCB, .TBC { text-align: justify; }
.TTL, .TTC, .TTR, .TTB { vertical-align: top; }
.TCC, .TCL, .TCR, .TCB { vertical-align: middle; }
.TBL, .TBC             { vertical-align: bottom; }

/* Breite Inhalte duerfen niemals die Seite schieben */
.content table { max-width: 100%; }
.scroll-x { overflow-x: auto; }

/* -------------------------------------------------------------------------
   Startseite
   ------------------------------------------------------------------------- */

/* Startseite — Werte aus intro.html:
   Flaechentexte <font size=5> = 24px in #808080, Hinweiskasten <font size=3>
   = 16px, Featured-Titel size=3 = 16px, Beschreibung size=2 = 13px.
   Alle Bilder stehen mit border=2 in einem Link, erben also die Linkfarbe. */
.home { text-align: center; }
/* Das Original erzeugt den Zeilenabstand ueber Leerzeilen in <font size=1>.
   Hier stehen stattdessen echte Absaetze mit Aussenabstand — 29px Zeile
   plus 12px ergeben dieselben 41px. */
.homeWelcome { color: #808080; margin: 16px 0 0; }
.homeWelcome p { font-size: 24px; font-weight: bold; color: inherit; margin: 0 0 12px; }
.homeWelcome p:last-child { margin-bottom: 0; }
.homeWelcome a { font-size: inherit; }

/* Vertikale Abstaende: nur margin-top, damit nichts kollabiert und die
   Werte den im Original gemessenen entsprechen (33 / 0 / 33 / 0 / 33).
   Der Link ist ein Block in Bildbreite — so entsteht unter dem Bild kein
   Platz fuer Unterlaengen und die Beschriftung sitzt direkt darunter. */
.homeProduct { margin: 33px 0 0; }
.homeProduct a { display: block; width: max-content; max-width: 100%; margin: 0 auto; }
.homeProduct img { box-sizing: content-box; border: 2px solid var(--link); display: block; }
.homeProduct a:hover img { border-color: var(--link-hover); }
.homeProductLabel { font-size: 24px; font-weight: bold; color: #808080; margin: 0; }
.homeProductLabel a { font-size: inherit; }

.homePanel {
    background: var(--bg-panel);
    max-width: 580px;
    margin: 33px auto 0;
    padding: 0;
    display: flow-root;                 /* wie die Tabellenzelle im Original: keine durchschlagenden Margins */
}
.homePanel p { font-size: 24px; font-weight: bold; color: #808080; margin: 8px 0; }
.homePanel p a { font-size: inherit; }
.homePanelSmall { margin-top: 1px; }
.homePanelSmall p { font-size: 16px; margin: 16px 0; }
.homePanel hr { border-top: 5px solid var(--rule); width: 570px; max-width: 100%; margin: 8px auto; }

/* Abstaende im Original gemessen: Titel->Text 19, Text->Bild 29,
   Bildende->naechster Titel 20. Der Bildlink ist wie auf der Startseite
   ein Block in Bildbreite, damit unter dem Bild kein Platz fuer
   Unterlaengen bleibt. */
.featured { margin: 19px auto 0; max-width: 80%; }
.featured h3 { margin-bottom: 20px; }
.featuredItem { margin-bottom: 20px; }
.featuredTitle { font-size: 16px; color: var(--text-strong); font-weight: bold; margin: 0; }
.featuredTitle a { font-size: 16px; color: #808080; font-weight: bold; }
.featuredTitle a:hover { color: var(--link-hover); }
.featuredDesc { font-size: 13px; color: var(--text-strong); margin: 0 0 13px; }
.featuredItem > a { display: block; width: max-content; max-width: 100%; margin: 0 auto; }
.featuredItem img { box-sizing: content-box; border: 2px solid var(--link); display: block; }
.featuredItem a:hover img { border-color: var(--link-hover); }

/* -------------------------------------------------------------------------
   Schmale Fenster: Sidebars klappen weg, Inhalt bekommt die volle Breite
   ------------------------------------------------------------------------- */

.nav-toggle { display: none; }

@media (max-width: 900px) {
    .site { height: auto; overflow: visible; grid-template-rows: auto 1fr; }
    .site-header { grid-template-columns: 1fr auto; height: auto; }
    .header-links, .header-donate { display: none; }
    .header-title { padding: 4px 0; }

    .site-body { display: block; }
    .col-menu, .col-news, .col-content { overflow: visible; }

    .nav-toggle {
        display: block;
        width: 100%;
        background: var(--menu-head-bg);
        color: var(--menu-head-fg);
        border: 0;
        font: bold 14px Verdana, sans-serif;
        padding: 8px;
        cursor: pointer;
        text-align: center;
    }
    .menu { padding: 0; }
    .menuBox { width: 100%; display: none; }
    .menu.is-open .menuBox { display: block; }
    .menuPromo { display: none; }

    .featured { max-width: none; }

    .col-news { border-top: 2px solid var(--rule); margin-top: 20px; }
}

/* -------------------------------------------------------------------------
   Tabelle der aktiven Spielserver
   ------------------------------------------------------------------------- */

.tracker-table { border-collapse: collapse; margin: 12px auto; min-width: 100%; }
.tracker-table th,
.tracker-table td { padding: 5px 8px; text-align: center; border: 1px solid var(--rule); }
.tracker-table th { background: #3a3a3a; color: var(--text-strong); }
.tracker-table td { background: #2e2e2e; color: var(--text); font-size: 9pt; }

/* -------------------------------------------------------------------------
   Schriftgroessen der abgeloesten <font size>-Angaben.
   Werte entsprechen der Darstellung des alten Markups.
   ------------------------------------------------------------------------- */

.fs-1 { font-size: 10px; }
.fs-2 { font-size: 13px; }
.fs-3 { font-size: 16px; }
.fs-4 { font-size: 18px; }
.fs-5 { font-size: 24px; }
.fs-6 { font-size: 32px; }
.fs-7 { font-size: 48px; }

/* -------------------------------------------------------------------------
   Versionshistorie
   ------------------------------------------------------------------------- */

.cl-controls { margin: 14px 0 6px; }

.cl-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cl-filter {
    font: bold 11px Verdana, sans-serif;
    color: var(--text);
    background: #333;
    border: 1px solid var(--rule);
    padding: 4px 10px;
    cursor: pointer;
}
.cl-filter:hover { background: #3d3d3d; color: var(--text-strong); }
.cl-filter.is-active { background: var(--menu-head-bg); color: #fff; border-color: var(--menu-head-bg); }
.cl-count { opacity: .7; font-weight: normal; }

.cl-search {
    width: 100%;
    max-width: 460px;
    font: 11pt Verdana, sans-serif;
    color: var(--text);
    background: #1e1e1e;
    border: 1px solid var(--rule);
    padding: 6px 8px;
}
.cl-search:focus { outline: 1px solid var(--link); }

.cl-status { font-size: 9pt; color: var(--head-small); margin: 6px 0 0; min-height: 1em; }

.cl-versions { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 10px 0 16px; }
.cl-versions a { font-size: 10pt; }

.cl-major { border-top: 1px solid var(--rule); padding: 6px 0; }
.cl-major > summary {
    cursor: pointer;
    font: bold 14pt Verdana, sans-serif;
    color: var(--head-small);
    padding: 4px 0;
    list-style-position: inside;
}
.cl-major > summary:hover { color: var(--link); }
.clMajorMeta { font: normal 9pt Verdana, sans-serif; color: var(--text); margin-left: 8px; }

.cl-release { margin: 12px 0 12px 6px; }
.clReleaseHead { color: var(--text-strong); font-size: 11pt; margin-bottom: 4px; }
.clReleaseTitle { color: var(--head-small); font-weight: normal; }

.cl-entries { list-style: none; margin: 0; padding: 0; }
.cl-entry { display: flex; gap: 8px; align-items: baseline; margin: 3px 0; font-size: 9.5pt; }
.cl-entry[hidden] { display: none; }

.cl-tag {
    flex: 0 0 66px;
    font: bold 8pt Verdana, sans-serif;
    text-align: center;
    padding: 1px 0;
    border: 1px solid var(--rule);
    color: var(--text-strong);
}
.clTagFixed    { background: #4a2323; }
.clTagNew      { background: #234a2c; }
.clTagImproved { background: #23364a; }
.clTagChanged  { background: #4a4223; }
.clTagNote,
.clTagRemoved  { background: #3a3a3a; }

.cl-text { flex: 1 1 auto; }

@media (max-width: 900px) {
    .cl-entry { flex-wrap: wrap; }
    .cl-tag { flex-basis: 60px; }
}

/* -------------------------------------------------------------------------
   Downloadverzeichnis
   ------------------------------------------------------------------------- */

.dl-group { margin: 22px 0; }
.dlGroupTitle { color: var(--head-small); border-bottom: 1px solid var(--rule); padding-bottom: 4px; }
.dl-list { list-style: none; margin: 10px 0 0; padding: 0; }
.dl-item {
    display: grid;
    grid-template-columns: 260px 130px 1fr;
    gap: 4px 14px;
    align-items: baseline;
    padding: 5px 0;
    border-bottom: 1px solid #333;
    font-size: 10pt;
}
.dlItemName { font-size: 11pt; }
.dlItemMeta { font-size: 8.5pt; color: var(--head-small); white-space: nowrap; }
.dlItemDesc { color: var(--text); }

@media (max-width: 900px) {
    .dl-item { grid-template-columns: 1fr; }
    .dlItemMeta { white-space: normal; }
}

/* -------------------------------------------------------------------------
   Rechtstexte (Impressum, Datenschutz)
   ------------------------------------------------------------------------- */

/* Aufbau wie im Impressum (content/imprint.php): der Block 80% breit und
   zentriert, der Titel zentriert, die Abschnittstitel weiss (h5) und um 40px
   eingerueckt, die Texte darunter um 80px — dort erzeugt die Altsite die
   Staffelung ueber zwei ineinander geschachtelte <ul>. */
.legal { width: 80%; margin: 0 auto; }
.legal h2 { text-align: center; margin-bottom: 14px; }
.legal h5 { margin: 22px 0 6px; padding-left: 40px; }
.legal p, .legal li { font-size: 10pt; line-height: 1.5; }
.legal > p, .legal > ul, .legal > address { margin-left: 80px; }
.legal > ul { margin-top: 6px; margin-bottom: 6px; padding-left: 18px; }
.legal address { font-style: normal; margin: 6px 0; line-height: 1.6; }
/* Abschlussstrich wie im Impressum: 90% breit, zentriert, 2px in --rule. */
.legalEnd { width: 90%; margin-top: 27px; }

/* -------------------------------------------------------------------------
   Fusszeile — Impressum und Datenschutz von jeder Seite erreichbar
   ------------------------------------------------------------------------- */

.page-footer {
    margin-top: 32px;
    padding: 12px 0 8px;
    border-top: 1px solid var(--rule);
    text-align: center;
    font-size: 9pt;
    color: var(--head-small);
}
.page-footer a { font-size: 9pt; }
.page-footer span { margin: 0 6px; }

/* -------------------------------------------------------------------------
   FAQ
   ------------------------------------------------------------------------- */

.faq { max-width: 80ch; }
.faqItem { border-top: 1px solid var(--rule); padding: 8px 0; }
.faqQuestion {
    cursor: pointer;
    font: bold 11pt Verdana, sans-serif;
    color: var(--text-strong);
    padding: 4px 0;
    list-style-position: inside;
}
.faqQuestion:hover { color: var(--link); }
.faqAnswer { padding: 6px 0 6px 18px; }
.faqAnswer p { margin: 6px 0; }

/* -------------------------------------------------------------------------
   Missions-Hints
   ------------------------------------------------------------------------- */

.hint-toc { display: flex; flex-direction: column; gap: 3px; margin: 12px 0 22px; }
.hint-toc a { font-size: 10pt; }

.hint-level { margin: 26px 0; }
.hintLevelHead { color: var(--head-small); border-bottom: 1px solid var(--rule); padding-bottom: 4px; }
.hint { margin: 16px 0; }
.hintTitle { color: var(--text-strong); font-size: 11pt; margin-bottom: 4px; }
.hintText { font-size: 10pt; max-width: 76ch; text-align: justify; }
.hintShots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hintShot img { display: block; box-sizing: content-box; border: 2px solid var(--link); height: 120px; width: auto; }
.hintShot:hover img { border-color: var(--link-hover); }

/* Reine Linkliste ohne Groessenangabe (Linksammlung) */
.dlItemLink { grid-template-columns: 260px 1fr; }
@media (max-width: 900px) { .dlItemLink { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   Artikelsammlungen (Worklog, Installation, Tracker)
   ------------------------------------------------------------------------- */

.art-intro { margin-bottom: 14px; }

.articles {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    align-items: start;
}

.art-index {
    position: sticky;
    top: 0;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    border: 1px solid var(--rule);
    background: #1e1e1e;
    padding: 8px;
}
.art-search {
    width: 100%;
    font: 10pt Verdana, sans-serif;
    color: var(--text);
    background: #141414;
    border: 1px solid var(--rule);
    padding: 4px 6px;
    margin-bottom: 8px;
}
.art-search:focus { outline: 1px solid var(--link); }

.art-list { list-style: none; margin: 0; padding: 0; }
.art-list li { border-bottom: 1px solid #2e2e2e; }
.art-list li[hidden] { display: none; }
.art-list a { display: block; font-size: 9.5pt; padding: 4px 2px; font-weight: normal; }
.art-list li.is-active a { color: var(--text-strong); background: #333; font-weight: bold; }

.art-body { min-width: 0; }
.art-body table { max-width: 100%; }

@media (max-width: 900px) {
    .articles { grid-template-columns: 1fr; }
    .art-index { position: static; max-height: 320px; }
}

/* -------------------------------------------------------------------------
   Optionstabellen im Handbuch
   ------------------------------------------------------------------------- */

.opt-table { border-collapse: collapse; width: 100%; margin: 8px 0 16px; }
.opt-table th {
    width: 190px;
    text-align: right;
    vertical-align: top;
    font-style: italic;
    font-weight: normal;
    color: var(--text-strong);
    padding: 3px 12px 3px 0;
    font-size: 10pt;
}
.opt-table td { vertical-align: top; padding: 3px 0; font-size: 10pt; }

@media (max-width: 900px) {
    .opt-table th { width: auto; text-align: left; display: block; padding-bottom: 0; }
    .opt-table td { display: block; padding-top: 0; padding-left: 12px; }
}

/* Kontaktangaben als Bild — bewusst nicht als Text, um automatisiertes
   Auslesen der Adresse zu erschweren. Gilt in Impressum und Datenschutz. */
.legalContact { margin: 10px 0 4px; }
.legalContact img { display: block; }

/* =========================================================================
   Level-Galerien

   Layout wie in der Altsite (scripts/makedesc.js): je Level ein Namensbalken
   ueber die volle Breite, darunter Vorschaubilder und Text nebeneinander,
   die Seiten wechseln von Eintrag zu Eintrag. Vorschaubilder in ihrer
   natuerlichen Groesse (154x116), Rahmen in Linkfarbe.
   ========================================================================= */

.gal-controls { margin: 14px 0 18px; }
.gal-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.galFiltersLabel { font: bold 9pt Verdana, sans-serif; color: var(--head-small); min-width: 52px; }
.gal-filter {
    font: bold 11px Verdana, sans-serif;
    color: var(--text);
    background: #333;
    border: 1px solid var(--rule);
    padding: 3px 9px;
    cursor: pointer;
}
.gal-filter:hover { background: #3d3d3d; color: var(--text-strong); }
.gal-filter.is-active { background: var(--menu-head-bg); color: #fff; border-color: var(--menu-head-bg); }
.gal-count { opacity: .7; font-weight: normal; }
.gal-search {
    width: 100%; max-width: 360px;
    font: 11pt Verdana, sans-serif;
    color: var(--text); background: #1e1e1e;
    border: 1px solid var(--rule);
    padding: 5px 8px; margin-top: 4px;
}
.gal-search:focus { outline: 1px solid var(--link); }
.gal-status { font-size: 9pt; color: var(--head-small); margin: 6px 0 0; min-height: 1em; }

.gal-item { margin: 0 0 26px; }
.gal-item[hidden] { display: none; }

/* Namensbalken, im Original bgcolor #505050 mit H3 */
.gal-bar {
    background: #505050;
    color: var(--head-large);
    text-align: center;
    padding: 4px 8px;
    margin: 0 auto 10px;
    width: 90%;
}

.gal-row { width: 90%; margin: 0 auto; border-collapse: separate; border-spacing: 8px 4px; }
.gal-cell { vertical-align: middle; }
.galCellShots { text-align: center; width: 1%; white-space: nowrap; }
.galCellDesc  { vertical-align: middle; }
.galCellL { text-align: left; }
.galCellR { text-align: right; }

.gal-subtitle { color: var(--text-strong); margin-bottom: 6px; }
.gal-text { font-size: 10pt; color: var(--text); white-space: normal; }
.galCellR .gal-text { margin-left: auto; }

.gal-meta { margin: 8px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.galCellR .gal-meta { justify-content: flex-end; }
.gal-rating, .gal-type {
    font: bold 8pt Verdana, sans-serif;
    padding: 2px 7px;
    border: 1px solid var(--rule);
    color: var(--text-strong);
}
.gal-rating { background: #4a2a10; color: var(--accent); border-color: var(--accent); }
.gal-type   { background: #23364a; }

.gal-dl { margin: 0 0 6px; font-size: 12pt; }
.gal-dl a { font-size: 12pt; }
.galDlExtra { margin: 6px 0 0; }
.gal-view { margin: 6px 0 0; }

.gal-grid { margin: 0 auto; border-collapse: separate; border-spacing: 4px; }
.gal-grid td { padding: 0; }
/* Rahmen in Linkfarbe — im Original ergab sich das aus <img border=2> im Link.
   max-width: none hebt die globale Bildregel auf: die Vorschaubilder behalten
   ihre natuerliche Groesse (154x116), der Text daneben bricht um. Sonst
   quetscht die Tabelle die Bilder zusammen. */
.gal-grid img {
    display: block;
    max-width: none;
    /* content-box, damit die Breitenangabe im HTML das Bild meint und nicht
       Bild minus Rahmen — sonst schrumpfen die Vorschaubilder um 4 px. */
    box-sizing: content-box;
    border: 2px solid var(--link);
}
.gal-grid a:hover img { border-color: var(--link-hover); }

/* =========================================================================
   Grossansicht eines Levels

   Entspricht ShowPic() der Altsite: Vorschauspalte links, grosses Bild
   rechts in einem dicken Rahmen, Titel darunter. Der Wechsel erfolgt beim
   Ueberfahren der Vorschaubilder, nicht per Klick.
   ========================================================================= */

/* Masse aus ShowPic(): aeussere Tabelle cellspacing=4, Vorschauspalte
   width=100 mit bgcolor #282828, innere Tabelle cellpadding=2. */
.galview { margin: 10px 0 0; }
.galviewLayout { margin: 0 auto; border-collapse: separate; border-spacing: 4px; }
.galviewStrip {
    vertical-align: top;
    width: 100px;
    min-width: 100px;
    background: #282828;
    padding: 2px;
    text-align: center;
}
.galviewThumb { display: block; padding: 2px; }
.galviewThumb img {
    display: block;
    margin: 0 auto;
    box-sizing: content-box;
    /* hebt die globale Bildregel auf — sonst gewinnt max-width gegen width */
    max-width: none;
    /* border=2 ohne umschliessenden Link: erbt im Original die Textfarbe */
    border: 2px solid var(--text);
    width: 77px;
    height: 58px;
    object-fit: cover;
}

.galviewMain { vertical-align: top; text-align: center; }
/* bordercolor=silver aus ShowPic() */
.galviewFrame { display: inline-block; border: 3px solid silver; background: #000; }
.galviewFrame img { display: block; box-sizing: content-box; max-width: 100%; height: auto; }
.galviewTitle { margin-top: 10px; color: var(--head-large); }
.galviewBack { margin-top: 16px; text-align: center; }

@media (max-width: 900px) {
    .gal-bar, .gal-row { width: 100%; }
    .gal-row, .gal-row tbody, .gal-row tr, .gal-cell { display: block; width: auto; }
    .galCellShots { white-space: normal; }
    .galCellL, .galCellR { text-align: left; }
    .galCellR .gal-meta { justify-content: flex-start; }
    .gal-grid { width: auto; }
    .gal-grid img { max-width: 100%; height: auto; }

    .galviewLayout, .galviewLayout tbody, .galviewLayout tr,
    .galviewStrip, .galviewMain { display: block; width: auto; }
    .galviewStrip { width: auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; }
    .galviewThumb { margin-bottom: 0; }
}

/* =========================================================================
   Downloadseiten im Forum-Layout

   model-downloads, texture-downloads, wallpaper-downloads und die
   TEW-Seiten binden in der Altsite nicht std.css ein, sondern AcidTech.css
   — ein phpBB-Theme. Dessen Regeln sind hier uebernommen und auf
   #maintable eingegrenzt, das nur diese Seiten mitbringen.

   Die Groessen bleiben in em wie in der Vorlage: .genmed in einem <p>
   ergibt so 1.1em von 1.1em = 12.1px; ausgerechnete Pixelwerte wuerden
   diese Staffelung verlieren.
   ========================================================================= */

/* Die Vorlage beginnt mit einem harten Reset — ohne ihn bekommen die
   Absaetze den Vorgabe-Aussenabstand des Browsers und jede Modellzeile
   waechst um rund 28px. Muss vor den Regeln mit Polstern stehen.
   content-box, weil die Vorlage von 2011 noch nicht mit border-box
   rechnet: die Kopfzeile ist dort 26px hoch *plus* Rahmen. */
#maintable, #maintable * { margin: 0; padding: 0; box-sizing: content-box; }

#maintable {
    margin: 0 auto;
    font-family: Verdana, "Lucida Grande", Helvetica, Arial, sans-serif;
    font-size: 10px;
    color: #B8B8B8;
}
#maintable table { border-collapse: separate; border-spacing: 0; }

#maintable td { padding: 2px; }
#maintable th {
    color: #CCDFF0;
    font-size: 11px;
    font-weight: bold;
    background: #4A6786;
    white-space: nowrap;
    padding: 0 5px;
    text-align: center;
    height: 26px;
    border-left:   solid 1px #317CC2;
    border-right:  solid 1px #164C7D;
    border-top:    solid 1px #3981C3;
    border-bottom: solid 1px #164C7D;
}
/* Eingelassene Zellen: oben/links hell, unten/rechts dunkel. */
#maintable .row1, #maintable .row2, #maintable .row3 {
    border-left:   solid 1px #404040;
    border-right:  solid 1px #121212;
    border-top:    solid 1px #3C3C3C;
    border-bottom: solid 1px #131313;
    background: #313131;
    padding: 4px;
}

/* Tabellenkopf: die caption setzt die Grundschrift auf 12px, worauf die
   2.0em des Titels rechnen; Ueberschriften stehen darin inline. */
#maintable caption { white-space: nowrap; text-align: center; }
#maintable caption, #maintable caption span {
    font-size: 12px; font-weight: bold; color: #3285D0;
}
#maintable caption h1, #maintable caption h2,
#maintable caption h3, #maintable caption h4, #maintable caption span { display: inline; }
#maintable caption a, #maintable caption a:visited { color: #3285D0; text-decoration: underline; }
#maintable caption a:hover { color: #D0D0D0; text-decoration: underline; }

#maintable h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.0em; font-weight: bold; color: #CCC; line-height: 120%;
}
#maintable h4 { font-size: 1.5em;  font-weight: bold; color: #FFF; }
#maintable h5 { font-size: 1.25em; font-weight: bold; color: #FFF; }
#maintable p  { font-family: inherit; font-size: 1.1em; color: inherit; }
#maintable .genmed   { margin: 1px; font-size: 1.1em; }
#maintable .gensmall { margin: 1px; font-size: 1em; }

#maintable a { font-family: inherit; color: #2370B6; font-weight: normal; font-size: inherit; }
#maintable a:hover { color: #F0E80A; text-decoration: underline; }
/* Die Vorlage stylt nur a.forumlink — die <span class="forumlink">
   dieser Seite bleiben deshalb normaler Text. */
#maintable a.forumlink { font-weight: bold; font-size: 1.2em; }
#maintable .copyright { color: #888; font-weight: normal; font-size: 9px; line-height: 1.2em; }
#maintable .copyright a, #maintable .copyright a:visited { color: #AAA; text-decoration: underline; }
#maintable .copyright a:hover { color: #FFF; }
#maintable img { border: 0; }