/* ==========================================================
   HTMLWiki.de · style.css · v1
   Optik: 1998. Technik: heute.
   Schriften: Times New Roman (Text), Arial (GUI), Courier New (Code)
   ========================================================== */

:root{
  --desktop:#008080;      /* Teal-Schreibtisch */
  --chrome:#C0C0C0;       /* Fenster-Grau */
  --chrome-hi:#FFFFFF;    /* Lichtkante */
  --chrome-lo:#808080;    /* Schattenkante */
  --chrome-dk:#404040;    /* tiefer Schatten */
  --titlebar-a:#000082;   /* Titelleiste links */
  --titlebar-b:#1074C6;   /* Titelleiste rechts */
  --ink:#000000;
  --paper:#FFFFFF;
  --link:#0000EE;
  --visited:#551A8B;
  --note-bg:#FFFFCC;
  --note-bd:#999900;
  --warn-bg:#FFDDDD;
  --warn-bd:#CC0000;
  --new:#FF0000;
  --term-bg:#000000;
  --term-fg:#33FF33;
  --code-bg:#F4F4F4;
  --maxw:960px;
  --f-gui:Arial,Helvetica,sans-serif;
  --f-text:'Times New Roman',Times,serif;
  --f-code:'Courier New',Courier,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--desktop);
  color:var(--ink);
  font-family:var(--f-text);
  font-size:17px;
  line-height:1.6;
}

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

/* Links: klassisch blau, besucht lila, immer unterstrichen */
a{color:var(--link)}
a:visited{color:var(--visited)}
a:hover{color:var(--new)}
a:focus-visible{outline:2px dotted var(--ink);outline-offset:2px}

/* Skip-Link */
.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--paper);color:var(--ink);
  padding:6px 12px;border:2px solid var(--ink);z-index:99;
  font-family:var(--f-gui);
}
.skip:focus{left:8px;top:8px}

/* ---------- Desktop + Hauptfenster ---------- */
.desktop{padding:16px 10px 40px;min-height:100vh}
.window{
  background:var(--chrome);
  border:2px solid;
  border-color:var(--chrome-hi) var(--chrome-dk) var(--chrome-dk) var(--chrome-hi);
  box-shadow:1px 1px 0 var(--ink);
}
.window-main{max-width:var(--maxw);margin:0 auto}

.titlebar{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(90deg,var(--titlebar-a),var(--titlebar-b));
  color:#fff;padding:3px 6px;
  font-family:var(--f-gui);font-size:13px;font-weight:bold;
  letter-spacing:.3px;
}
.titlebar .tb-btns{display:flex;gap:2px}
.titlebar .tb-btns span{
  display:inline-block;width:18px;height:15px;
  background:var(--chrome);color:var(--ink);
  border:2px solid;
  border-color:var(--chrome-hi) var(--chrome-dk) var(--chrome-dk) var(--chrome-hi);
  font-size:10px;line-height:11px;text-align:center;
}

/* ---------- Buntes Textlogo ---------- */
.logohead{
  padding:14px 12px 8px;text-align:center;
  background:var(--chrome);
}
.logohead a{
  text-decoration:none;
  font-family:var(--f-gui);
  font-weight:bold;
  font-size:34px;
  letter-spacing:1px;
}
.logohead a:hover{color:inherit}
.logohead .lg0{color:var(--chrome-dk)}
.logohead .lg1{color:#CC0000}
.logohead .lg2{color:#0000CC}
.logohead .lg3{color:#007700}
.logohead .lg4{color:#AA00AA}
.logohead .lg5{color:#B25900}
.logohead .lg6{color:#007286}
.logo-claim{
  font-family:var(--f-code);font-size:12px;color:var(--ink);
  margin-top:2px;
}

/* ---------- Menüleiste (Desktop) ---------- */
.menubar{
  display:flex;flex-wrap:wrap;
  background:var(--chrome);
  border-top:1px solid var(--chrome-hi);
  border-bottom:1px solid var(--chrome-lo);
  padding:1px 4px;
}
.menubar a{
  font-family:var(--f-gui);font-size:14px;
  color:var(--ink);text-decoration:none;
  padding:4px 11px;
}
.menubar a:visited{color:var(--ink)}
.menubar a:hover,.menubar a:focus-visible{background:var(--titlebar-a);color:#fff;outline:none}
.menubar a[aria-current="true"]{background:var(--titlebar-a);color:#fff}

/* ---------- Menü (mobil, ohne JavaScript) ---------- */
.menu-mobile{display:none;background:var(--chrome);border-bottom:1px solid var(--chrome-lo)}
.menu-mobile summary{
  font-family:var(--f-gui);font-size:14px;font-weight:bold;
  padding:8px 12px;cursor:pointer;list-style:none;
}
.menu-mobile summary::-webkit-details-marker{display:none}
.menu-mobile summary::before{content:"≡ ";font-size:16px}
.menu-mobile a{
  display:block;font-family:var(--f-gui);font-size:15px;
  color:var(--ink);text-decoration:none;
  padding:9px 16px;border-top:1px solid var(--chrome-lo);
}
.menu-mobile a:visited{color:var(--ink)}
.menu-mobile a:hover,.menu-mobile a:focus-visible{background:var(--titlebar-a);color:#fff}

/* ---------- Nostalgische Zweitnavigation ---------- */
.retronav{
  background:#E8E8E8;
  border-top:1px solid var(--chrome-hi);
  border-bottom:1px solid var(--chrome-lo);
  padding:5px 8px;text-align:center;
  font-family:var(--f-code);font-size:13px;
}
.retronav a{white-space:nowrap}

/* ---------- Breadcrumbs ---------- */
.crumbs{
  font-family:var(--f-gui);font-size:12px;
  background:#E8E8E8;
  border-bottom:1px solid var(--chrome-lo);
  padding:4px 10px;
}
.crumbs a{color:var(--link)}

/* ---------- Inhaltsbereich ---------- */
.content{
  background:var(--paper);
  margin:8px;padding:18px 22px 26px;
  border:2px solid;
  border-color:var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo);
}

h1{font-family:var(--f-text);font-size:30px;line-height:1.25;margin:.2em 0 .5em}
h2{
  font-family:var(--f-gui);font-size:19px;
  background:var(--chrome);
  border:1px solid;
  border-color:var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi);
  padding:4px 10px;margin:1.6em 0 .7em;
}
h3{font-family:var(--f-gui);font-size:16px;margin:1.4em 0 .5em}
h4{font-family:var(--f-gui);font-size:14px;margin:1.2em 0 .4em}
p,ul,ol,dl{margin:.7em 0}
li{margin:.25em 0}

hr,.hr98{
  border:0;height:0;
  border-top:1px solid var(--chrome-lo);
  border-bottom:1px solid var(--chrome-hi);
  margin:1.4em 0;
}

/* ---------- Buttons ---------- */
.btn98{
  display:inline-block;
  background:var(--chrome);color:var(--ink)!important;
  font-family:var(--f-gui);font-size:15px;font-weight:bold;
  text-decoration:none;
  padding:9px 18px;margin:4px 6px 4px 0;
  border:2px solid;
  border-color:var(--chrome-hi) var(--chrome-dk) var(--chrome-dk) var(--chrome-hi);
  cursor:pointer;
}
.btn98:visited{color:var(--ink)!important}
.btn98:hover{background:#D4D4D4;color:var(--ink)}
.btn98:active{border-color:var(--chrome-dk) var(--chrome-hi) var(--chrome-hi) var(--chrome-dk)}
.btn98-big{font-size:17px;padding:12px 22px}

/* ---------- Boxen ---------- */
.box-note{
  background:var(--note-bg);border:1px solid var(--note-bd);
  padding:10px 14px;margin:1em 0;
}
.box-warn{
  background:var(--warn-bg);border:1px solid var(--warn-bd);
  padding:10px 14px;margin:1em 0;
}
.box-construction{
  background:var(--note-bg);
  border:4px solid;
  border-image:repeating-linear-gradient(45deg,#F2C200 0 10px,#111 10px 20px) 4;
  padding:10px 14px;margin:1em 0;
}
.box-note p:first-child,.box-warn p:first-child,.box-construction p:first-child{margin-top:0}
.box-note p:last-child,.box-warn p:last-child,.box-construction p:last-child{margin-bottom:0}

/* ---------- Badges ---------- */
.badge-new{
  display:inline-block;
  background:var(--new);color:#fff;
  font-family:var(--f-gui);font-size:11px;font-weight:bold;
  padding:0 5px;margin-left:6px;
  animation:blink 1.1s steps(2,start) infinite;
  vertical-align:middle;
}
.badge{
  display:inline-block;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--ink);
  font-family:var(--f-gui);font-size:11px;font-weight:bold;
  padding:2px 7px;margin:3px 3px 3px 0;
}
.badge-green{background:#CCFFCC}
.badge-blue{background:#CCE5FF}
.badge-red{background:#FFD6D6}
@keyframes blink{50%{opacity:0}}

/* ---------- Lauftext-Imitat (sparsam benutzen!) ---------- */
.marquee{
  overflow:hidden;white-space:nowrap;
  background:var(--term-bg);color:var(--term-fg);
  font-family:var(--f-code);font-size:14px;
  border:2px inset var(--chrome-lo);
  padding:3px 0;
}
.marquee span{display:inline-block;padding-left:100%;animation:mq 18s linear infinite}
@keyframes mq{to{transform:translateX(-100%)}}

/* ---------- Code + Demos ---------- */
pre,code,kbd{font-family:var(--f-code)}
code{background:var(--code-bg);padding:0 3px;font-size:.95em}
pre{
  background:var(--code-bg);
  border:1px solid var(--chrome-lo);
  padding:12px 14px;overflow-x:auto;
  font-size:14px;line-height:1.5;margin:1em 0;
}
pre code{background:none;padding:0}
.code-label{
  display:inline-block;
  font-family:var(--f-gui);font-size:11px;font-weight:bold;
  background:var(--chrome);border:1px solid var(--chrome-lo);border-bottom:none;
  padding:2px 8px;margin-bottom:-1px;
}
.term{
  background:var(--term-bg);color:var(--term-fg);
  border:2px inset var(--chrome-lo);
}
.demo98{
  border:2px solid;
  border-color:var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo);
  background:var(--paper);
  padding:12px 14px;margin:0 0 1em;
}
.demo98-head{
  font-family:var(--f-gui);font-size:11px;font-weight:bold;
  background:var(--chrome);
  margin:-12px -14px 10px;padding:3px 8px;
  border-bottom:1px solid var(--chrome-lo);
}
.demo98 iframe{border:1px solid var(--chrome-lo);width:100%;background:#fff}

/* ---------- Spielwiese ---------- */
.play-area textarea{
  width:100%;min-height:180px;
  font-family:var(--f-code);font-size:14px;
  border:2px inset var(--chrome-lo);
  padding:8px;background:var(--paper);color:var(--ink);
}
.play-result iframe{
  width:100%;min-height:180px;
  border:2px inset var(--chrome-lo);background:#fff;
}

/* ---------- Tabellen ---------- */
table{border-collapse:collapse;margin:1em 0;font-size:16px}
th,td{border:1px solid var(--chrome-lo);padding:5px 10px;text-align:left;vertical-align:top}
th{background:var(--chrome);font-family:var(--f-gui);font-size:14px}
.table-scroll{overflow-x:auto}

/* ---------- Definitionslisten (Glossar) ---------- */
dt{font-family:var(--f-gui);font-weight:bold;margin-top:.8em}
dd{margin:0 0 .5em 20px}

/* ---------- Formulare ---------- */
input[type=text],input[type=email],textarea,select{
  font-family:var(--f-gui);font-size:15px;
  border:2px inset var(--chrome-lo);
  background:var(--paper);color:var(--ink);
  padding:5px 7px;max-width:100%;
}
label{font-family:var(--f-gui);font-size:14px}
input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible{
  outline:2px dotted var(--ink);outline-offset:2px;
}

/* ---------- Kachel-Raster (Startseite, Hubs) ---------- */
.tilegrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:1em 0}
.tile{
  background:var(--chrome);
  border:2px solid;
  border-color:var(--chrome-hi) var(--chrome-dk) var(--chrome-dk) var(--chrome-hi);
}
.tile-title{
  background:linear-gradient(90deg,var(--titlebar-a),var(--titlebar-b));
  color:#fff;font-family:var(--f-gui);font-size:12px;font-weight:bold;
  padding:2px 8px;
}
.tile-body{background:var(--paper);margin:6px;padding:10px 12px;border:1px solid var(--chrome-lo)}
.tile-body p:first-child{margin-top:0}
.tile-body p:last-child{margin-bottom:0}

/* ---------- Sitemap-Baum ---------- */
.tree{font-family:var(--f-code);font-size:14px;line-height:1.8}
.tree ul{list-style:none;padding-left:22px;margin:.2em 0}
.tree > ul{padding-left:0}
.tree li::before{content:"+– ";color:var(--chrome-lo)}

/* ---------- 404-Dialog ---------- */
.dialog404{max-width:540px;margin:40px auto}
.dialog404 .content{text-align:left}
.path-fake{font-family:var(--f-code);background:var(--code-bg);padding:2px 6px;border:1px solid var(--chrome-lo);display:inline-block}

/* ---------- Retro-Counter ---------- */
.counter{
  display:inline-block;
  font-family:var(--f-code);font-size:15px;letter-spacing:3px;
  background:var(--term-bg);color:var(--term-fg);
  border:2px inset var(--chrome-lo);
  padding:2px 8px;
}
.counter-label{font-family:var(--f-gui);font-size:11px}

/* ---------- Footer ---------- */
.footer98{
  background:var(--chrome);
  border-top:1px solid var(--chrome-hi);
  padding:14px 16px 18px;
  font-family:var(--f-gui);font-size:13px;
  text-align:center;
}
.footer98 .f-line{font-family:var(--f-code);font-size:13px;margin:.4em 0}
.footer98 .f-links{margin:.6em 0}
.footer98 a{color:var(--link)}
.statusbar{
  display:flex;justify-content:space-between;gap:8px;
  background:var(--chrome);
  border-top:1px solid var(--chrome-lo);
  padding:3px 8px;
  font-family:var(--f-gui);font-size:11px;
}
.statusbar span{
  border:1px solid;
  border-color:var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo);
  padding:1px 8px;background:var(--chrome);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------- Kleinkram ---------- */
.center{text-align:center}
.small{font-size:13px}
.muted{color:#555}
.nowrap{white-space:nowrap}

/* ---------- Mobil ---------- */
@media (max-width:720px){
  .desktop{padding:0 0 24px}
  .window-main{border-left:none;border-right:none;box-shadow:none}
  .menubar{display:none}
  .menu-mobile{display:block}
  .content{margin:6px;padding:14px 14px 20px}
  .tilegrid{grid-template-columns:1fr}
  h1{font-size:25px}
  .logohead a{font-size:27px}
  .retronav{font-size:12px}
  .statusbar span:nth-child(2){display:none}
}

/* ---------- Bewegung aus, wenn gewünscht ---------- */
@media (prefers-reduced-motion:reduce){
  .badge-new,.marquee span{animation:none!important}
  *{transition:none!important}
}

/* ---------- Druck ---------- */
@media print{
  body{background:#fff}
  .menubar,.menu-mobile,.retronav,.titlebar,.statusbar,.footer98 .f-badges{display:none}
  .window,.content{border:none;box-shadow:none}
}

/* ---- Autoren ---- */
.byline { font-size: 12px; color: #555; margin: -6px 0 14px; font-family: Arial, sans-serif; }
.byline a { color: #555; }
.autor-karte { display: flex; gap: 12px; align-items: flex-start;
  background: #F4F4F4; border: 1px solid var(--border-dark);
  padding: 10px; margin-bottom: 16px; }
.autor-karte img { border: 1px solid var(--border-dark); flex-shrink: 0; }
.autor-karte p { margin: 0; }