@charset "UTF-8";
/* ****************************************************************************
@version: 2.2.0108
@last-changed: 2025-01-16T19:00
@autor: hjt1946
Grundlegendes:
Alle BORDER deaktiviert und durch OUTLINE THIN DOTTED ersetzt. Nur HR benutzt
 SOLID.
*******************************************************************************

*******************************************************************************
Die CSS-Variable --debug_mobile___css_root erzeugt bei 1 einen Rand um H1, H2
 und H3. Der Wert 0 setzt die Umrandungsbreite auf 0px --> kein Rand.
BODY (hier Spezifität 0,1,1) darf keinen MARGIN haben, bleibt sonst weiß‼
Alle folgenden CSS-Dateien erreichen normal nur Spezifität 0,0,1.
**************************************************************************** */
:root {
  --debug_mobile___css_root: 0;
}
root:not(:has(body[class=mobile___css_root])) body {
  margin: 0px;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body :is(h1, h2, h3 ) {
  outline-style: dotted;
  outline-width: calc( var(--debug_mobile___css_root) * 1px );
  outline-color: var(--mobile___css_warn-color, light-dark(hwb(0 0% 30%), hwb(0 50% 0%)));
}

/* ****************************************************************************
Fandom-Stil: .article-table-wrapper … gehört in eigene CSS-Datei. Ist zum Test
 von Fremddateien.
**************************************************************************** */
.article-table-wrapper small {
  hyphens: initial;
  word-break: initial;
}

@media screen {
  .mobile___css_root {
    a:where(:not(:hover)) {
      text-decoration: none;
    }
  }
}
/* ****************************************************************************
…print entspricht jetzt …not screen{}.
Color-scheme bei  PDF-Druck: dark | light, bei Papier-Druck: light setzen. Ist
 momentan doppelt enthalten.
**************************************************************************** */
@media print {
  .before_mobile___css_root {
    color-scheme: dark;
  }
  .mobile___css_root {
    color-scheme: dark;
    nav {
      ul {
        column-span: all;
        list-style-type: none;
      }
      a:any-link {
        line-height: 2lh;
        outline-width: calc( var(--debug_mobile___css_root) * 1px );
        outline-style: dotted;
        outline-color: var(--mobile___css_warn-color);
      }
    }
    a:where(:not(:hover)) {
      background-color: Canvas;
      color: CanvasText;
      text-decoration: none;
    }
    a::after {
      content: ' <' attr(href) '>';
    }
  }
}

.mobile___css_root {
  .warn-color { color: var(--mobile___css_warn-color, light-dark(hwb(0 0% 30%), hwb(0 50% 0%))); }
  a:any-link[href^="#"]::before { content: '⋕ '; }
  a:any-link[href^="./"]::before { content: '☗ '; }
  a:any-link[href^="http"]::before { content: '◥ '; }
}

/* ****************************************************************************
Zu ändern:
1. Anzeige von senkrechter Leserichtung in Tabellenspalten fehlt.
2. Container einbauen.
*******************************************************************************
Korrekte Darstellung ab Viewportbreite 240px.
Globale Aufteilung Griditems:
274px = 17,125em absolutes Minimum.
1240px / 4 = 310px -> 80em in vier Spalten möglich.
Ab 640px Breite 2 Spalten da.
Allen Elementen außer HR wird border-width: 0px; der Border entfernt oder durch
 outline: …; ersetzt.
*******************************************************************************
Spalten (columns):
Es werden 2 Spalten mit 5vi margin und column-rule zur Eingrenzung der
Spaltenbreite zwecks guter Lesbarkeit verwendet (3 sind möglich).
Darstellung unter ~880px einspaltig mit 5vi margin.
*******************************************************************************
Hier werden Farben vom gewählten System-Theme und Accentcolor gesetzt.
color: LinkText ist hwb(210 0% 20%) und bei LEIGHT zu hell. Chrome
Neu: color(srgb 0 0.32 0.64) AAA OK. Chrome
color: LinkText ist hwb(240 54.90% 0%) und bei DARK zu dunkel. FF
LEIGHT erfüllt AA, aber nicht AAA. FF
Fazit: Windows 11 und die Browser sind unterschiedlich und können noch nicht 
vollständig mit System-Themes und Darkmode-Umschaltung umgehen.
Stellt man in den Systemeinstellungen die Accentfarbe um, liefern die Browser
 weiterhin einen Blauton mit der Systemfarbe AccentColor.
Notepad++ färbt seine Fensterleisten ein.
Chrome bietet in Einstellungen⇒Darstellung⇒Design den Schalter
 'Gerätefarben übernehmen' an. Aber an die Systemfarbe AccentColor wird nichts
 weitergereicht, nur die Fensterleiste und einiges mehr wird eingefärbt.
 FF bietet nur 'System-Theme — automatisch, es regt sich nichts.

 (hjt1946 2025-01-06 07:42:53).
*******************************************************************************
**************************************************************************** */

@media screen {
  .before_mobile___css_root {
    color-scheme: light dark;
  }
}
/* ****************************************************************************
Der Spezialfall für den Einsatz von Klasse mobile___css_root irgendwo in einer
 bestehenden Webseite. Es wird der gesamte Bildschirm benötigt um das unter-
 liegende CSS zu verdecken. Darum wird darunter noch ein DIV mit der Klasse
 before_mobile___css_root eingebaut.
color-scheme: light dark; hat hier Spezifität 0,2,2 kaum überschreibbar!
**************************************************************************** */
html:not(:has(body.mobile___css_root)) {
  .before_mobile___css_root {
    background-color: Canvas;
    color: CanvasText;
    min-width: 100%;
    overflow: auto;
    text-size-adjust: 100%;
  }
  .mobile___css_root {
    --font-family: system-ui, sans-serif;
    --h1-font-family: cursive, ui-serif, serif;
    --border-color: color-mix(in srgb, CanvasText 20%, Canvas);
    --body-max-width: 80em;
    --body-width: min(var(--body-max-width), 100vi);
    --guide-max-width: min(45em, 100vi);
    --mobile___css_warn-color: light-dark(hwb(0 0% 30%), hwb(0 50% 0%));
    --mobile___css_buttonface: light-dark(ButtonFace, hwb(0 20% 80%));
    font-family: var(--font-family);
  }
}

/* ****************************************************************************
Der Standardfall für den Einsatz von Klasse mobile___css_root.
**************************************************************************** */
html:has(body.mobile___css_root) {
  --font-family: system-ui, sans-serif;
  --h1-font-family: cursive, ui-serif, serif;
  --border-color: color-mix(in srgb, CanvasText 20%, Canvas);
  --body-max-width: 80em;
  --body-width: min(var(--body-max-width), 100vi);
  --guide-max-width:  min(45em, 100vi);
  --mobile___css_warn-color: light-dark(hwb(0 0% 30%), hwb(0 50% 0%));
  --mobile___css_buttonface: light-dark(ButtonFace, hwb(0 20% 80%));
  font-family: var(--font-family);
  overflow: auto;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ****************************************************************************
Die maximale Breite anzeigen.
**************************************************************************** */
@media screen and ( min-width: 80em ) {
  .mobile___css_root {
    box-shadow: 0 0 16px 0px var(--border-color);
    margin-inline-start: auto;
    margin-inline-end: auto;
  }
}

/* ****************************************************************************
Die grundlegende Klasse
@media print { & { color-scheme: dark;
**************************************************************************** */
.mobile___css_root {
  max-width: var(--body-width);
  >hgroup h1, >h1 {
    font-family: var(--h1-font-family);
    font-size: clamp(1em, 5vi, 2em);
    margin-block-start: 1rem;
    margin-block-end: .5rem;
    text-align: center;
  }
  p a {
    text-align: start;
  }
  @media print {
    & {
      color-scheme: dark;
    }
  }
  @media screen {
    & {
      color-scheme: light dark;
    }
    a:where(:not(:hover)) {
      text-decoration: none;
      font-weight: normal;
    }
    a:link {
      color: light-dark(color-mix(in srgb, LinkText, CanvasText 20% ), LinkText);
    }
    a:active {color: ActiveText;}
    a:hover,
    a:focus {
      background-color: var(--border-color);
    }
  }
  >header {
    >hgroup h1, >h1 {
      font-family: var(--h1-font-family);
      font-size: clamp(1.3em, 5vi, 2.5em);
      margin-block-start: 1rem;
      margin-block-end: .5rem;
      text-align: center;
      &:has(svg) {
        font-size: clamp(1.3em, 5vi, 4em);
        margin: 0;
      }
    }
    >hgroup p {
      max-width: min(var(--guide-max-width), 100%);
      margin-block-start: 0;
      margin-inline: auto;
      text-align: start;
    }
  }
  >article {
    padding-block-end: 1em;
    margin-block-end: 2em;
    h1 {
      font-family: inherit;
      font-size: clamp(1rem, 4vi, 1.5rem);
    }
    h2 {
      font-size: clamp(1rem, 3.75vi, 1.25rem);
    }
    >hgroup {
      margin-block-end: 1em;
    }
  }
  :where(article, aside, nav, section) :is(h1, h2) {
    margin-block-start: 1rem;
    margin-block-end: 1rem;
    text-align: center;
  }
  :is(h3, h4, h5, h6) {
    font-size: 1rem;
    margin-block-start: 0.5rem;
    margin-block-end: 0.5rem;
    text-align: start;
  }
  hr {
    border: 0 none;
    outline-color: var(--border-color);
    outline-style: solid;
    outline-width: thin;
  }
}

/* ****************************************************************************
Vorgesehen für parallele Ansicht von 2 oder 3 Dateien.
**************************************************************************** */
.mobile___css_root:has(iframe:first-of-type) {
  margin: 0;
  padding: 0;
  max-width: 100vi;
  display: flex;
  flex-wrap: wrap;
  column-gap: 2px;
  row-gap: 2px;
  height: 100vb;
  iframe {
    flex: 1 0 auto;
    border-style: solid;
    border-width: 1px 0 1px 0;
  }
}

/* ****************************************************************************
Vorgesehen für Navigation in index.html und anderen Dateien.
**************************************************************************** */
@media screen {
  .mobile___css_root nav {
    ul {
      list-style-type: none;
      padding-inline-start: 0;
      margin-inline-start: auto;
      margin-inline-end: auto;
      margin-block-start: 0;
      margin-block-end: 0;
      max-width: 20.625em;
      outline: thin dotted var(--border-color);
      text-overflow: clip;
    }
    a:any-link {
      display: inline-flex;
      gap: 0 1ch;
      align-items: center;
      color: CanvasText;
      max-height: fit-content;
      min-height: 2lh;
      overflow: hidden;
      text-align: start;
      text-decoration: none;
      text-overflow: clip;
      width: 100%;
    }
  }
}

/* ****************************************************************************
Vorgesehen für article > section. Selbstfüllendes Grid.
**************************************************************************** */
.autofillgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, clamp(237px, 17.125em, 100%));
  column-gap: 0;
  row-gap: 1em;
  justify-content: space-evenly;
  div {
    break-inside: avoid;
    width: 100%;
    height: max-content;
    h3,
    p {
      margin: 0;
      hyphens: auto;
    }
    ol, ul {
      padding-inline-start: 1.5em;
      margin-block-start: 0;
      margin-block-end: 0;
      li > span {
        display: flex;
        flex-direction: column;
      }
    }
  }
  hr {
    grid-column-start: 1;
    grid-column-end: -1;
    margin-inline-start: 1em;
    margin-inline-end: 1em;
  }
  hgroup p {
    margin-inline: auto;
  }
  & > :where( hgroup:has(h2), h2) {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: -1;
  }
}

/* ****************************************************************************
Vorgesehen für article > section wenn Spalten (COLUMNS) verwendet werden um die
 Lesbarkeit zu erhöhen.
HGROUP:has(H1), H2 und BR bekommen die Breite aller Spalten zugeteilt.
Ab H3 nur Spaltenbreite.
Die Spalten selbst sollten weder margin noch padding verwenden.
*******************************************************************************
Bei mit DIV eingeschlossenen Blöcken bekommen H2 und HR nur Spaltenbreite.
Durch einen Darstellungsfehler in der Spalte wird das erste margin-block-start
angezeigt. Momentan Behebung durch Entfernung mittels :first-of-type.
Als Ausgleich bekommt diese Klasse 1em margin-block.
*******************************************************************************
.columns-3: Ab 640px Breite 2 Spalten, ab ~925px 3 Spalten.
**************************************************************************** */
.article-desc {
  column-width: clamp(18.75em, min(23em, var(--body-width)), 40em);
  margin-inline: 5vi;
  column-rule-style: hidden;
  column-rule-width: 5vi;
  column-gap: 5vi;
  column-fill: balance;
  .columns-3&, .columns-3 {
    column-rule-width: 1px;
    column-count: 3;
    column-width: 17em;
    margin-inline: 0;
  }
  >hgroup {
    margin-block-end: 1em;
  }
  div, hgroup, figure {
    break-inside: avoid;
  }
  hgroup:has(h1, h2), >h2, >hr {
    column-span: all;
    text-align: center;
  }
  figure {
    margin-inline-start: 0;
    margin-inline-end: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    p {
      margin-block: 0;
    }
    figcaption {
      font-size: 1.15em;
      font-weight: bold;
    }
    ul, ol {
      break-inside: avoid;
    }
    ul {
      list-style-position: inside;
    }
  }
}

.mobile___css_root .article-desc {
  caption {
    caption-side: bottom;
    margin-block-start: 0rem;
    padding-block-start: .5rem;
    padding-block-end: .5rem;
  }
  & h2 + :where(ul, ol, dl, table caption) {margin-block-start: 0;}
  & :where(p, h3, ul):first-of-type {
    margin-block-start: 0;
  }
}

/* ****************************************************************************
hgroup mit H1 oder H2, wahlweise gefolgt von P formatieren.
**************************************************************************** */
.mobile___css_root article hgroup {
  p {
    max-width: min(var(--guide-max-width), 100%);
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline: auto;
  }
  p:last-of-type {
    margin-block-end: initial;
  }
  :is(h1, h2) {
    text-align: center;
  }
  :where(h1, h2, h3, h4, h5, h6):has(+ p) {
    margin-block-end: .25rem;
  }
}

/* ****************************************************************************
ToDo:
1. TABLE und atronachenschmiede.html I flex B flexitem ⇒ B flex | grid I item
alle vereinheitlichen?
**************************************************************************** */
.mobile___css_root {
  table {
    border-width: 0px;
    border-spacing: 0px;
    break-inside: avoid;
    margin-inline: auto;
    overflow-x: auto;
    scroll-behavior: auto;
    margin-block-end: 1em;
    max-width: var(--body-width);
    caption {
      text-align: start;
      margin-block-start: 1rem;
      padding-block-start: .5rem;
      padding-block-end: .5rem;
      padding-inline-start: 1em;
      padding-inline-end: 1em;
      outline: thin dotted var(--border-color);
    }
    tbody th { text-align: start;}
    th, td {
      border-width: 0px;
      outline: thin dotted var(--border-color);
      outline-offset: -1px;
      empty-cells: show;
      padding-inline: 2px; /* Noch verbessern!!! padding-block unnötig */
    }
    i {
      display: flex;
      flex-direction: column;
    }
    tbody p {
      text-align: start;
      margin: 0;
    }
  }
  p, ol li, ul li, th, td {
    hyphens: auto;
  }
  p {
    text-align: justify;
  }
  dl {
    break-inside: avoid;
    margin-block-start: 0;
    dt {
      font-weight: bold;
      b {
        display: flex;
        flex-flow: row;
        column-gap: 2px;
        i {
          min-width: 1.5lh;
          text-align: center;
          text-decoration-line: none;
        }
      }
    }
    dd {
      margin-inline-start: 1em;
      >b {
        display: flex;
        justify-content: space-between;
      }
    }
  }
}

.autofill-grid,
.article-desc {
  .guide {
    column-span: all;
    grid-column-start: 1;
    grid-column-end: -1;
  }
}

/* ****************************************************************************
Vorgesehen für article in Standard-HTML. Auch zur Formatierung einzelner DIV …
var(--guide-max-width) wird für Breite von Klasse guide benutzt.
li[data-head] wird als zentrierte Überschrift benutzt.
**************************************************************************** */
.guide {
  max-width: var(--guide-max-width);
  margin-inline: auto;
  column-span: all;
  grid-column-start: 1;
  grid-column-end: -1;
  .body-width {
    max-width: var(--body-width);
  }
  .article-desc {
    column-count: 2;
  }
  pre, pre& {
    white-space: pre-wrap;
    font-size: 1rem;
  }
  dl {
    width: fit-content;
  }
  :is(ol, ul) > li[data-head] {
    font-weight: bold;
    list-style-type:none;
    text-align:center;
  }
}

/* ****************************************************************************
:is(b, i, span) Verwendung: Flex- und Grid-Bereich erstellen und für Items.
Meist B { display:flex; I { … } Span { … } } ⇒ I, Span Items. Dies
 erspart die Klassensuppe.
Erstes I ist Flexitem fester Breite für Vorzeichen in alchemie-spoiler.html,
 folgende I, SPAN… sind Flexitems.
Für Griditems sind DIV besser geeignet.
**************************************************************************** */
.guide,
.autofillgrid,
.article-desc {
  :not(p) :is(b, i, span) {
    /* Spezifität 0,1,1 */
    font-stretch: inherit;
    font-style: inherit;
    font-variant: inherit;
    font-weight: inherit;
    text-decoration: inherit;
  }
}

/* ****************************************************************************

Hier beginnen allgemein verwendbare Klassen, aber basierend auf vorstehenden
 Festlegungen. Bei externer Verwendung können auch andere Grund-CSS verwendet
 werden.

**************************************************************************** */

/* ****************************************************************************
Tabelle mit sichtbar bleibender (sticky) Kopf- und Fußzeile.
**************************************************************************** */
.thead-tfoot-sticky {
  thead {
    top: 0;
  }
  tfoot {
    bottom: 0;
  }
  thead, tfoot {
    position: sticky;
    background-color: Canvas;
  }
  td {
    outline: thin dotted var(--border-color);
  }
}

/* ****************************************************************************
Tabelle mit schmalen Spalten zum ankreuzen, TH Schrift von oben nach unten.
Nur die erste Spalte breiter. Funktioniert bestens in Klasse thead-tfoot-sticky.
Entweder Umbruch mittels BR oder gesonderte TR für Sortbutton.
**************************************************************************** */
.centered-mark {
  thead {
    th {
      min-width: 1.5lh;
      vertical-align: bottom;
    }
    tr:not([class*=sortbutton-only]) th:not(:first-child) b {
      writing-mode: vertical-rl;
    }
    tr:not([class*=sortbutton-only]) th {
      padding-block-start: .25em;
      padding-block-end: .25em;
    }
  }
  td:not(:first-child) {
      padding-block-start: .25lh;
      padding-block-end: .25lh;
      text-align: center;
      vertical-align: middle;
  }
  tfoot {
    th {
      min-width: 1lh;
      vertical-align: top;
      padding-block-start: .5em;
    }
    th:not(:first-child) span {
      writing-mode: vertical-rl;
      rotate: 0.5turn;
    }
  }
}

/* ****************************************************************************
Klasse TR.sortbutton-only eingeführt um zwei Tabellenzeilen in THEAD für
 JB_Tablesort zu schaffen, damit der Text stylbar bleibt. Zeilenhöhe bestimmt
 Höhe und Breite des SVG-Bilds, da der Text nicht mit reagiert.
Dies verbessert nur zusätzlich das Aussehen.
**************************************************************************** */
.centered-mark :is(thead, tfoot) tr:not([class*=sortbutton-only]) th:first-child {
  vertical-align: middle;
}

/* ****************************************************************************
 Vorgesehen für article > section mit Bildern.
**************************************************************************** */
.schattenzeichen {
  display: grid;
  grid-template-columns: repeat(auto-fill, min(26em, 100vi));
  gap: 1em 0;
  justify-content: space-evenly;
  p, ol li, ul li, th, td {
    hyphens: auto;
  }
  >hgroup:has(h1, h2), h1, h2 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: -1;
  }
  >hgroup:has(h1, h2):has(+p) {
    max-width: min(var(--guide-max-width), 100%);
  }
  figure {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    break-inside: avoid;
    margin-inline-start: 0;
    margin-inline-end: 0;
    overflow: auto;
    resize: none;
    figcaption {
      flex: 0 0 auto;
      font-size: 1.15em;
      font-weight: bold;
      line-height: 1em;
      text-align: center;
      margin-block: .5lh;
      width: 100%;
    }
    svg {
      flex: 1 1 30%;
    }
    p {
      flex: 1 1 60%;
      hyphens: auto;
      margin: 0.25em;
    }
  }
}
/* ****************************************************************************
Einige POPOVER Festlegungen.
**************************************************************************** */
:popover-open {
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  padding: 1rem;
  max-width: var(--guide-max-width);
  max-height: 90vh;
  background-color: Canvas;
  color: CanvasText;
}
/* ****************************************************************************
Für accentcolor -> Chrome Flag setzen, FF noch keine Reaktion.
Chrome liefert blau, FF nichts. Die Einstellung im System wird ignoriert.
**************************************************************************** */
/*
@supports (background-color: accentcolor) {
  :popover-open {
    background-color: accentcolor;
    color: accentcolortext;
  }
  #notwendige-info:popover-open {
    border-color: var(--mobile___css_warn-color, red);
  }
}
*/
/* ***  *** */