/* mjs medien - 1993. Mehr CSS gab es damals nicht. Eigentlich gar keins. */

body {
    max-width: 46em;
    margin: 1em auto;
    padding: 0 12px;
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    line-height: 1.35;
    color: #000;
    background: #c0c0c0;
}

a:link    { color: #0000ee; }
a:visited { color: #551a8b; }
a:active  { color: #ff0000; }

pre, tt, code, kbd { font-family: "Courier New", Courier, monospace; }
pre { overflow-x: auto; }

pre.logo {
    margin: 0 0 .3em;
    font-size: min(15px, 2.25vw);
    line-height: 1.1;
    font-weight: bold;
    overflow: visible;
}

.logo-link, .logo-link:visited { color: #000; text-decoration: none; display: block; }
.logo-small { display: none; }

.tagline { margin: 0 0 1em; font-family: "Courier New", monospace; font-size: 14px; letter-spacing: 1px; }
.nav { display: block; margin: 1em 0; font-family: "Courier New", monospace; font-size: 15px; word-spacing: 2px; }
.nav .ni { white-space: nowrap; }

/* ---------- Handy: gestapeltes Logo + Win95-Knoepfe als Navigation ---------- */
@media (max-width: 640px) {
    body { margin-top: .6em; }
    .logo-wide  { display: none; }
    .logo-small { display: block; font-size: min(15px, 3.6vw); line-height: 1.05; margin-bottom: .5em; }
    .tagline { font-size: 12px; letter-spacing: 0; line-height: 1.5; }
    .tagline .tl-ort { display: block; }

    .nav { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; word-spacing: 0; }
    .nav .br { display: none; }
    .nav .ni { display: flex; white-space: normal; }
    .nav .ni a, .nav .ni b {
        flex: 1;
        display: flex; align-items: center; justify-content: center;
        min-height: 46px;
        padding: 6px 8px;
        font: bold 16px/1.2 "Courier New", monospace;
        text-align: center;
        text-decoration: none;
        color: #000;
        background: #c0c0c0;
        border: 2px solid;
        border-color: #fff #404040 #404040 #fff;
        box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
    }
    .nav .ni a:active, .nav .ni.cur b {
        border-color: #404040 #fff #fff #404040;
        box-shadow: inset 1px 1px 0 #808080;
        background: #b4b4b4;
    }
    .nav .ni.cur b { color: #0000ee; }
    /* ungerade Anzahl: letzter Knopf ueber volle Breite */
    .nav .ni:last-child:nth-child(odd) { grid-column: span 2; }
}

hr { border: 0; border-top: 2px groove #fff; }

h1 { font-size: 2em; margin: .5em 0 .4em; }
h2 { font-size: 1.4em; margin: 1.4em 0 .4em; }

pre.term {
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.3;
    color: #33ff33;
    background: #000;
    border: 2px inset #808080;
}
.cursor { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

dt { font-weight: bold; margin-top: .6em; }
dd { margin-left: 2em; }

address { font-size: 15px; }
.small  { font-size: 13px; }

input, textarea, select, button { font: 15px "Courier New", monospace; max-width: 100%; }
textarea { width: 100%; }

@media (max-width: 480px) {
    body { font-size: 16px; }
    dd { margin-left: 1em; }
    ul { padding-left: 1.3em; }
}

/* Signalweg-Animation: das Signal "wandert" Segment fuer Segment */
pre.chain { font-size: min(14px, 2.05vw); }
pre.chain .s { animation: signal 4.5s steps(1) infinite; animation-delay: calc(var(--i) * .5s); }
@keyframes signal {
    0%   { color: #000; background: #33ff33; }
    11%  { color: inherit; background: transparent; }
}
.onair { padding: 0 4px; color: #000; background: #ff3333; animation: blink 2.4s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { pre.chain .s, .onair { animation: none; } }

/* Backend */
table.stats { border-collapse: collapse; font: 14px "Courier New", monospace; margin: .5em 0 1em; }
table.stats td, table.stats th { padding: 1px 10px 1px 0; text-align: left; vertical-align: top; white-space: nowrap; }
table.stats td.n { text-align: right; }
.bar { color: #006400; }
.statwrap { overflow-x: auto; }

/* Verschleierte E-Mail: Adresse wird erst beim Rendern zusammengesetzt */
.em::before { content: attr(data-u); }
.em::after  { content: "\0040" attr(data-d); }

/* ASCII-Daumenkino (KI-Dolmetscher): 20 Einzelbilder, je 0,35 s */
.flip { display: grid; margin: 1em 0; }
.flip > pre { grid-area: 1 / 1; margin: 0; font-size: min(14px, 2.55vw); visibility: hidden;
              animation: flipframe 7s steps(1) infinite; animation-delay: calc(var(--f) * .35s); }
@keyframes flipframe { 0% { visibility: visible; } 5% { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
    .flip > pre { animation: none; }
    .flip > pre:last-child { visibility: visible; }
}

/* Honeypot-Felder: fuer Menschen unsichtbar, fuer Bots verlockend */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
table.stats td.wrap { white-space: normal; min-width: 260px; max-width: 520px; word-break: break-word; }
table.hplog tr td { border-top: 1px dotted #808080; padding-top: 3px; }

.adminnav { font-family: "Courier New", monospace; font-size: 15px; line-height: 1.8; }

/* Animiertes Logo (iframe, Inhalt aus logo.php) */
.logo-frame { display: block; width: 100%; height: auto; border: 0; margin: 0 0 .3em; pointer-events: none; background: transparent; }

/* ---------- Kontakt: Adresse + ASCII-Deutschlandkarte ---------- */
.kontakt-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 2.5em; }
.kontakt-adr { flex: 0 1 auto; }
.kontakt-map { margin: 1em 0; }
.kontakt-map pre { margin: 0; font-size: 13px; line-height: 1.05; overflow: visible; }
.kontakt-map figcaption { margin-top: .4em; font: 12px "Courier New", monospace; }
.pin { color: #c00000; font-weight: bold; animation: blink 1.6s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .pin { animation: none; } }
@media (max-width: 480px) { .kontakt-map pre { font-size: min(13px, 3.3vw); } }

/* ---------- Fusszeile: Besucherzaehler + Aktualisierungsdatum ---------- */
.ft-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4em 1.5em; font: 13px "Courier New", monospace; }
.ctr {
    display: inline-block;
    padding: 1px 4px;
    font: bold 14px "Courier New", monospace;
    letter-spacing: 2px;
    color: #33ff33;
    background: #000;
    border: 2px inset #808080;
}