/* convex tv. archiv – Gerüst statt Frameset
   Bildet archiv/archiv.htm 1:1 nach:
     <frameset rows="130,70%,12%" border="3">
       blick (Metanavigation) / month (Inhalt) / audio (Player)
   Die Inhalte der Monatsseiten kommen unverändert aus ../convex.css.
   Alle Maße sind am Original gemessen (Chrome, Frameset, Quirks-Modus). */


/* ========== Gerüst ========== */

html, body { height: 100%; }

body.archiv {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: 130px 70fr 12fr;   /* rows="130,70%,12%" */
  overflow: hidden;
}

/* Frame-Rand (border="3"), Farben vom Original abgenommen. Als border-image,
   damit background-image frei bleibt für Hintergrundbilder der Seiten */
.frame-month,
.frame-audio {
  border-top: 3px solid transparent;
  border-image: linear-gradient(#aaa 0 0.5px, #d0d0d0 0.5px 2.5px, #000 2.5px 3px, transparent 3px) 3 0 0 0;
}

.frame-blick,
.frame-month,
.frame-audio {
  min-height: 0;
  overflow: auto;
  padding: 8px;                           /* body-Rand jedes Frames */
}

.frame-month:focus { outline: none; }

/* Unterer Frame-Rand: im Original fällt er mit dem Rand des letzten Absatzes zusammen
   (8px und 16px ergeben 16px, nicht 24px). #inhalt rollt selbst, dort fallen Ränder nicht
   mit dem Innenabstand zusammen; ein leerer Block mit 8px Rand tut es mit dem letzten Absatz */
.frame-month.quirks { padding-bottom: 0; }
.frame-month.quirks::after { content: ""; display: block; margin-top: 8px; }

/* Altseiten, die noch nicht umgestellt sind, stehen unverändert im iframe */
.frame-month.altseite { padding: 0; overflow: hidden; }
.frame-month.altseite iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}


/* ========== blick: Metanavigation (archiv/blick.html) ========== */

.frame-blick {
  background: #2f6ce6 url(../gifs/blue_bg.gif);
  color: #000;
  font: 13px monospace;                  /* <center><tt> */
  text-align: center;
}
.frame-blick a:link    { color: #dfefe3; }
.frame-blick a:visited { color: #dfe3ef; }
.frame-blick a:active  { color: red; }

table.blick {
  width: 100%;
  height: 100px;
  border-collapse: separate;
  border-spacing: 0;
  font: inherit;
}
table.blick td {
  padding: 0;
  vertical-align: middle;
}

/* Zeile 1: Menü */
table.blick .menue > td { height: 13px; text-align: left; }
.menue table {
  border-spacing: 0;
  font: inherit;
}
.menue table td {
  height: 13px;
  padding: 0;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  background: url(../gifs/horibg15.gif);
  color: #bfc0c0;
}
.menue .marke,
.menue .archive { width: 76px; text-align: center; }
.menue .marke { font-size: 10px; font-weight: bold; }
.menue .punkt {
  width: 76px;
  padding-left: 10px;                    /* line.gif 1px + wimpelgr16.gif in 9px */
  background:
    url(../gifs/line.gif) 0 50% / 1px 13px no-repeat,
    url(../gifs/wimpelgr16.gif) 1px 50% / 7px 13px no-repeat,
    url(../gifs/horibg15.gif);
  font-size: 10px;
}
.menue .punkt.schmal { padding-left: 8px; }   /* "software": Wimpelzelle nur 7px */
.menue .punkt a:link,
.menue .punkt a:visited { color: #de9536; }
.menue .punkt.mailinglist a:link,
.menue .punkt.mailinglist a:visited { color: #de7427; }

/* Zeile 2: on air, Monate, RIS */
table.blick .onair {
  width: 150px;
  text-align: left;
  background: url(../gifs/tdair_bg.gif);
}
.onair a:link,
.onair a:visited { color: #de9536; font-size: 16px; }

table.blick .monate { width: 60%; text-align: center; }
.monate table {
  width: 322px;
  height: 50px;
  margin: 0 auto;
  border-spacing: 2px;
  font: inherit;
}
table.blick .monate td,
.monate th {
  padding: 2px;
  text-align: center;
  vertical-align: middle;
}
.monate th { width: 10px; font-weight: bold; }

table.blick .ris { text-align: right; color: #b2b2b2; }
.ris img {
  display: block;            /* Bildzeile ohne Unterlänge wie im Quirks-Modus */
  margin-left: auto;
  border: 2px solid #b2b2b2;
}
.ris br { display: none; }
.ris span { display: block; font-size: 10px; }

/* Zeile 3: Linie und home */
table.blick .fuss td { height: 25px; }
table.blick .fuss .leer   { width: 150px; }
table.blick .fuss .linie  { width: 60%; background: url(../gifs/horibg-25.gif); }
table.blick .fuss .strich {
  width: 1px;
  background: url(../gifs/line.gif) 100% 0 / 1px 25px no-repeat, url(../gifs/horibg-25.gif);
}
table.blick .fuss .wimpel {
  width: 9px;
  background: url(../gifs/wimpelgr16.gif) 0 50% / 7px 13px no-repeat, url(../gifs/horibg-25.gif);
}
table.blick .fuss .home {
  width: 20%;
  text-align: right;
  background: url(../gifs/horibg-25.gif);
}
.fuss .home a:link,
.fuss .home a:visited { color: #de9536; }


/* ========== audio: Player (1997/xx/audio.html) ========== */

.frame-audio {
  background-color: rgb(192, 192, 192);
  align-content: center;                 /* body#audio in convex.css */
}
.frame-audio .player[hidden] { display: none; }

/* Leerseiten des Originals, solange noch nichts spielt (data-leer):
   blau = audio_blau.html, silber = archiv/audio.html, braun = audio_old.html */
.frame-audio[data-leer="blau"]:has(.player[hidden]) {
  background: #2f6ce6 url(../gifs/blue_bg.gif);
}
.frame-audio[data-leer="braun"]:has(.player[hidden]) {
  background-color: #3b1d01;
}


/* ========== month: Startseite (archiv/month_2009.html) ========== */

.seite-start .frame-month {
  background: #1e90ff url(../gifs/blue_bg.gif);
  color: #000;
  font: 16px "Times New Roman", Times, serif;
}
.start-hinweis { color: #fff; }


/* ========== month: Monatsübersicht (1997/xx/MMJJ.html) ========== */

.seite-monat .frame-month {
  background-color: rgb(192, 192, 192);
  color: #000;
}


/* ========== Framesets als eine Seite (z. B. format/2424) ==========
   <frameset rows="*,131" border="0"> -> Raster; erster Frame als Inhalt,
   weitere als <iframe>. scrolling="no" wie im Original: kein Rollbalken */

body.rahmen {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  display: grid;
  overflow: hidden;
}
.rahmen-teil {
  box-sizing: border-box;
  display: block;
  min-height: 0;
  width: 100%;
  height: 100%;
  border: 0;
  overflow: hidden;
}
main.rahmen-teil {
  padding: 8px;                           /* body-Rand des Frames */
  position: relative;                     /* absolute Ebenen (GoLive) messen vom Frame-Rand */
}
/* verschachteltes Frameset (onebitlouder/index): inneres Raster, Spuren im style-Attribut */
.rahmen-teil.rahmen-innen { display: grid; }

/* Rahmen zwischen Frames (frameset ohne border="0"): Chrome malt ihn hellgrau mit
   dunkler Kante, je ein Gerätepixel breit (--gp); er liegt in der Spur des folgenden Frames */
:root { --gp: 1px; }
@media (resolution >= 2dppx) { :root { --gp: 0.5px; } }
@media (resolution >= 3dppx) { :root { --gp: calc(1px / 3); } }
body.rahmen > .mit-rand {
  border: 0 solid transparent;
  border-top-width: var(--rand);
  border-image: linear-gradient(#aaa 0 var(--gp), #d0d0d0 var(--gp) calc(var(--rand) - var(--gp)),
    #000 calc(var(--rand) - var(--gp)) var(--rand), transparent var(--rand)) var(--rand-n) 0 0 0;
}
body.rahmen.spalten > .mit-rand {
  border-top-width: 0;
  border-left-width: var(--rand);
  border-image: linear-gradient(to right, #aaa 0 var(--gp), #d0d0d0 var(--gp) calc(var(--rand) - var(--gp)),
    #000 calc(var(--rand) - var(--gp)) var(--rand), transparent var(--rand)) 0 0 0 var(--rand-n);
}

/* ========== eigenständige Altseiten (ohne Archiv-Gerüst, z. B. pro/euphoria) ========== */

/* Rand: Browser-Standard 8px, kein eigener Wert, damit marginwidth/marginheight
   eines alten Framesets (z. B. pro/trimmdich/in.htm) weiter greifen */

/* Bewusste Korrektur (pro/euphoria): Der Player bestimmte die Spaltenbreiten mit,
   die Liste sprang zwischen den Seiten und beim Laden um bis zu 51px.
   So füllt er seine Spalte, ohne ihre Breite zu beeinflussen. */
.quirks .player { contain: inline-size; }

/* ========== month: umgebaute Altseiten (Sendungen, Beiträge) ==========
   Der Konverter (tools/konvertieren.py) erhält die Struktur der Originale.
   Diese Regeln bilden nach, wie Browser solche Seiten im Quirks-Modus zeigen.
   Farben aus <body bgcolor text link vlink alink> kommen als Variablen. */

.quirks {
  background-color: var(--bg, transparent);
  color: var(--text, #000);
  font: 16px serif;                      /* Standardschrift des Browsers wie damals */
}
.quirks a         { color: inherit; }     /* <a> ohne href ist normaler Text */
.quirks a:link    { color: var(--link, #00e); }
.quirks a:visited { color: var(--vlink, #551a8b); }
.quirks a:active  { color: var(--alink, red); }

/* Nutzerwunsch: Pfeile der Bildergalerie (pro/hws/gallery/source/*, schwarzer Grund)
   weiß statt der Standard-Linkfarben des Originals */
.s-000000-fff8ff { --link: #fff; --vlink: #fff; --alink: #fff; }

/* <tt> und <font size="1-7">: Chrome rechnet Schlüsselwort-Größen im Quirks-Modus
   mit eigener Tabelle, getrennt für Proportional- (16px) und Monospace-Schrift (13px).
   --p / --q = Größe proportional / monospace, --m = 1 innerhalb von <tt> */
.quirks { --p: 16; --q: 13; --m: 0; }
.quirks .f1 { --p: 10; --q: 9; }
.quirks .f2 { --p: 13; --q: 10; }
.quirks .f3 { --p: 16; --q: 13; }
.quirks .f4 { --p: 18; --q: 16; }
.quirks .f5 { --p: 24; --q: 20; }
.quirks .f6 { --p: 32; --q: 26; }
.quirks .f7 { --p: 48; --q: 40; }
.quirks :is(.tt, pre, code, kbd, samp) { --m: 1; font-family: monospace; }
.quirks table { --p: 16; --q: 13; }
.quirks :is(.tt, pre, code, kbd, samp, .f1, .f2, .f3, .f4, .f5, .f6, .f7, table) {
  font-size: calc((var(--p) + (var(--q) - var(--p)) * var(--m)) * 1px);
}
.quirks .big    { font-size: larger; }
.quirks .strike { text-decoration: line-through; }
.quirks .fett   { font-weight: bold; }
.quirks .kursiv { font-style: italic; }
.quirks .unter  { text-decoration: underline; }

/* Formulare haben nur im Quirks-Modus einen unteren Abstand (Chrome quirks.css) */
.quirks form { margin-bottom: 1em; }

/* <p> mit Tabelle darin (nur im Quirks-Modus möglich) wird <div class="p"> */
.quirks :where(div).p { margin-block: 1em; }   /* :where: .oben/.unten (weiter unten) gehen vor */

/* Schrift-Tags um Blöcke: kein eigener Kasten */
.quirks .dc { display: contents; }

/* <center>, align="…" (richtet wie früher auch Tabellen aus) */
.quirks .a-center { text-align: center; text-align: -moz-center; text-align: -webkit-center; }
.quirks .a-right { text-align: right;  text-align: -moz-right;  text-align: -webkit-right; }
.quirks .a-left  { text-align: left;   text-align: -moz-left;   text-align: -webkit-left; }
.quirks .a-justify { text-align: justify; }
/* align der Zelle geht vor align der Zeile (:where hält die Zeilenregel schwächer) */
.quirks :is(td, th).a-center, .quirks :where(tr.a-center) > * { text-align: center; text-align: -moz-center; text-align: -webkit-center; }
.quirks :is(td, th).a-right, .quirks :where(tr.a-right) > * { text-align: right; text-align: -moz-right; text-align: -webkit-right; }
.quirks :is(td, th).a-left, .quirks :where(tr.a-left) > * { text-align: left; text-align: -moz-left; text-align: -webkit-left; }

.quirks br.clear { clear: both; }
.quirks span.clear { display: block; clear: both; }   /* nach <span><br></span>, siehe Konverter */
/* <blink> wie in Netscape: hartes An/Aus im Sekundentakt */
@keyframes blinken { 50% { visibility: hidden; } }
.quirks .x-blink { animation: blinken 1s step-end infinite; }
@media (prefers-reduced-motion: reduce) {
  .quirks .x-blink { animation: none; }
}

/* Steuerzeichen DEL im Original: Chrome (macOS) zeichnet es als Lücke in der
   Ersatzschrift PingFang SC, die auch die Zeilenhöhe bestimmt */
.quirks .del { font-family: "PingFang SC"; }
/* unsichtbares Plugin (<embed hidden>, Gaia-Musikspur): im Quirks-Modus bekommt seine Zeile
   keine Schrifthöhe; ohne das säße es 5px tiefer auf der Grundlinie (pro/hws/contd/issue2/body) */
.quirks embed[hidden] { vertical-align: top; }
/* Steuerzeichen BS (0x08): unsichtbar, ohne Breite, Ersatzschrift LastResort */
.quirks .bs { font-family: LastResort; }
.quirks .c1 { font-family: "PingFang SC"; }       /* C1-Steuerzeichen (in Windows-1252 unbelegt) */
/* übrige Steuerzeichen (0x01-0x1f): Breite (Chrome 0,333em statt 1/3em) und Zeilenhöhe wie in Chrome */
.quirks .c0 { font-family: "Hiragino Sans"; letter-spacing: -0.000333em; }
.quirks .float-left  { float: left; }
.quirks .float-right { float: right; }
.quirks img.float-left  { margin-right: 3px; }   /* wie Chrome für <img align> */
.quirks img.float-right { margin-left: 3px; }
/* Bild allein in einer Tabellenzelle: Zeile so hoch wie das Bild */
.quirks img.zb { display: block; }
/* Zelle nur aus dicht stehenden Bildern: ohne Schrift keine Hilfslinie, Bildzeilen so hoch wie die Bilder */
.quirks .nb { font-size: 0; }
.quirks table.mitte  { margin-inline: auto; }
.quirks .va-middle { vertical-align: middle; vertical-align: -webkit-baseline-middle; }
.quirks .va-absmiddle { vertical-align: middle; }
/* wie Chrome (HTMLElement::ApplyAlignmentAttributeToStyle): bottom ist die Grundlinie */
.quirks .va-top { vertical-align: top; }
.quirks .va-texttop { vertical-align: text-top; }
.quirks .va-bottom, .quirks .va-baseline { vertical-align: baseline; }
.quirks .va-absbottom { vertical-align: bottom; }
.quirks hr.noshade { border-style: solid; border-color: gray; background-color: gray; }
/* <hr align>: Chrome setzt die Ränder der schmaleren Linie */
.quirks hr.hr-left { margin-left: 0; margin-right: auto; }
.quirks hr.hr-right { margin-left: auto; margin-right: 0; }
.quirks hr.hr-center { margin-left: auto; margin-right: auto; }

/* Tabellen nehmen im Quirks-Modus die Textfarbe des <body>, nicht die eines umgebenden <font> */
.quirks :where(table) { color: var(--text, #000); }

/* Bezugshöhe für Prozenthöhen (Quirks: Fenster abzüglich body-Rand bzw. Frame-Höhe) */
body.quirks.eigen { --hoehe: calc(100vh - 16px); }
/* Quirks: body ist so hoch wie sein Inhalt (füllt das Fenster nicht, gemessen an
   pro/liste/97/03a), sein unterer Rand zählt beim Rollen mit – mit height: 100%
   (html und body) liefe langer Inhalt heraus und der Rand fiele weg */
body.quirks.eigen { height: auto; }
html:has(> body.quirks.eigen) { height: auto; min-height: 100%; }
main.quirks { container-type: size; --hoehe: 100cqh; }

/* Tabellen erben im Quirks-Modus Schriftgröße und -stärke nicht */
.quirks table {
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  line-height: normal;
  white-space: normal;
  text-align: start;
  --zp: 1px;
}
.quirks td, .quirks th { padding: var(--zp); vertical-align: inherit; }  /* gegen convex.css */
.quirks :is(thead, tbody, tfoot) { vertical-align: middle; }
/* border="N": Farbe wie beim Elternelement (Chrome: border-color inherit), d. h. Grau
   in einer anderen Tabelle (UA: table { border-color: gray }), sonst die Textfarbe */
.quirks table.rand { border: var(--rand) outset; border-color: inherit; }
.quirks table.rand > :is(thead, tbody, tfoot, tr), .quirks table.rand > * > tr { border-color: inherit; }
/* nur die eigenen Zellen, nicht die einer verschachtelten Tabelle (service/search/search02) */
.quirks table.rand > :is(thead, tbody, tfoot) > tr > :is(td, th),
.quirks table.rand > tr > :is(td, th) { border: 1px inset; border-color: inherit; }

/* Zeilenhöhe im Quirks-Modus: Blöcke tragen selbst nichts zur Zeilenhöhe bei,
   nur ihr Text (der Konverter setzt losen Text dafür in <span>) */
.quirks,
.quirks :where(p, div, blockquote, td, th, li, dd, dt, dl, ul, ol, h1, h2, h3, h4, h5, h6, address, caption):where(:not(.plyr, .plyr *)) {
  line-height: 0;
}
.quirks :where(span, a, b, i, u, em, strong, small, sup, sub, code, cite, br, img):where(:not(.plyr, .plyr *)) {
  line-height: normal;
}
/* vorformatierter Text: wie andere Blöcke ohne eigene Zeilenhöhe; der Konverter setzt
   Text- und Leerzeilen einzeln in <span> (Zeilen nur mit kleinerem <font> sind niedriger) */
.quirks :where(pre, xmp, listing, plaintext) { line-height: 0; }
/* Quirks: Standard-Abstände am Anfang des body und von Tabellenzellen entfallen */
.quirks .oben { margin-top: 0; }
.quirks .unten { margin-bottom: 0; }

/* (:where hält diese Regeln schwach: eigene Stile einer Seite, z. B. .textstyle1
   { line-height: 1em }, haben Vorrang wie früher vor den Browser-Vorgaben) */

/* Elemente mit Zeilenhöhe aus dem Seiten-Stylesheet: Text darin erbt sie */
.quirks .lh-eigen :is(span, a, b, i, u, em, strong, small, sup, sub, code, cite, br) { line-height: inherit; }

/* Platzhalter für <embed> mit Klang (Netscape LiveAudio): hält Zeile bzw. Größe frei */
.quirks .x-embed > i { display: inline-block; vertical-align: baseline; }

/* QuickTime-Steuerleiste (scripts/quicktime.js): gleiche Größe wie das alte Plugin,
   Grundlinie unten wie bei einem ersetzten Element, Aussehen nach QuickTime 3/4 */
.qt {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: baseline;
  box-sizing: border-box;
  border: 1px solid #555;
  background: linear-gradient(#e8e8e8, #b8b8b8);
}
.qt > button {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(100%, 18px);
  margin: 0;
  padding: 0;
  border: 0;
  border-right: 1px solid #777;
  background: transparent;
  cursor: pointer;
}
.qt > button::before {                     /* Dreieck: abspielen */
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #000;
}
.qt.spielt > button::before {              /* zwei Balken: anhalten */
  width: 2px;
  height: 8px;
  border-width: 0 2px;
  border-color: #000;
  background: transparent;
}
.qt-leiste {
  position: absolute;
  inset: calc(50% - 2px) 4px auto 22px;
  height: 4px;
  background: #666;
  box-shadow: inset 0 1px 1px #222;
  cursor: pointer;
}
.qt-leiste > i { display: block; height: 100%; width: 0; background: #e7d27a; }
@media (forced-colors: active) { .qt { border-color: CanvasText; } }

/* Inline-Hüllen ohne eigenen Text (class="h") zählen ebenfalls nicht mit */
.quirks .h { line-height: 0; }
/* Inline-Kinder einer solchen Hülle tragen wieder selbst (Blöcke darin nicht: <a name> um
   ganze Seiten, pro/hws/contd/issue2/body) */
.quirks .h > :where(:not(p, div, blockquote, center, table, ul, ol, dl, li, dd, dt, form, pre, hr,
  h1, h2, h3, h4, h5, h6, address)) { line-height: normal; }
.quirks .h > .h { line-height: 0; }
/* Schrift-Hüllen ohne eigenen Text erzeugen gar keinen Kasten (Quirks: sie zählen nicht);
   ein Kasten der Höhe 0 säße je nach Schrift etwas über der Grundlinie und höbe kleine
   Bilder an (pro/station/to/station). Nicht bei Links, Unter-/Durchstreichung, Blinken:
   deren Linie bzw. Wirkung braucht einen Kasten */
.quirks span.h:not(.strike, .unter, .x-blink, .x-embed, .bs, .c0, .c1, .del) { display: contents; }