:root {
    /* Farben: */
    --dunkelblau:   rgb(93,91,132);	/* #5d5b84 */
    --mittelblau:   rgb(142,142,162);	/* #8e8ea2 */
    --hellblau:	    rgb(220,220,220);	/* #dcdcdc */
    --linkrot:	    #d00000;
    --linkbeige:    #a06000;
    --sand:	    #f7f3de;		/* Tabelle hell, Hinweis Hintergrund */
    --braun:	    #ceb28c;		/* Tabelle dunkel */
    --dunkelbraun:  #59462d;		/* Hinweis Rand */
    --schriftfarbe: black;
    --rahmenfarbe:  black;


}

/* ----------------------------------------------------------------------
 * Grundgerüst
 * ---------------------------------------------------------------------- */

body {
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
  font-style: normal;		/* normal italic oblique */
  font-variant: normal;		/* normal small-caps */
  font-weight: normal;		/* normal bold bolder lighter */
  text-align: justify;
  /* Farben */
  color: var(--schriftfarbe);
  background-color: var(--dunkelblau);
  background-image: url(bgs.png);
  background-attachment: fixed;
}

/*
 * Linke und rechte Spalte
 */

div.links {
    font-size: small; /* Schriftgröße Menü links */
    position: fixed;
    top: 0px;
    left: 0px;
    width: 14em;
    height: 100%;
    margin: 0px 1em;
    padding: 0.5em 0px 0px 0px;
    background-color: var(--mittelblau);
}

div.rechts {
    font-size: small; /* dieselbe wie links, damit Positionierung klappt */
    position: absolute;
    top: 0px;
    left: 16em;
    right: 0px;
    margin: 0px;
    padding: 0px;
}

/*
 * Der Ganze Inhalt (nicht das Menü) ist hierin eingebunden.
 */
div.alles {
    font-size: medium; /* Schriftgröße des Textes */
    margin-left: 1em;
    margin-right: 1em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding: 1em;
    max-width: 40em;
    /* Farben */
    color: var(--schriftfarbe);
    background-color: white;
}

/* ----------------------------------------------------------------------
 * Überschriften
 * ---------------------------------------------------------------------- */

/*
 * Projekt- und Seitenüberschrift
 */
H1 {
  font-size: 2em;
  font-weight: bold;
  text-align: left;
  padding: 0px;
  margin: 0.25em 0.25em 0.5em 0.25em;
}

/*
 * Indizierte Überschrift
 */
H2 {
  font-size: 1.6em;
  font-weight: bold;
  text-align: left;
  padding: 0px;
  margin: 0.5em 0.3125em;
}

/*
 * Unterabschnitt
 */
H3 {
  font-family: "Century Schoolbook L","Bookman Old Style",serif;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.3ex;
  padding: 0px;
  margin: 1em 0.4167em;
}

/*
 * logo statt einer Überschrift
 */
div.logo {
  text-align: center;
}

img.logo {
  border: none;
  margin: 0px;
  padding: 0px;
}

/* ----------------------------------------------------------------------
 * Textabschnitte
 * ---------------------------------------------------------------------- */

/*
 * normaler Text
 */
p {
  padding: 0px;
  margin: 1.0em 0.5em;
}

/*
 * letzte Änderung, Versionsnummer, Untertitel
 */
div.untertitel {
    display: flex;
    align-items: center;
    padding: 0.5ex 0.5em;
    margin: 0px 0px 0.5em 0px;
    border-top: thin solid;
    border-bottom: medium solid;
    /* Farben */
    border-color: var(--rahmenfarbe);
}

p.untertitel_text {
    padding: 0px;
    margin: 0px;
    flex: 1 1 content;
    text-align: left;
}

p.untertitel_datum {
    padding: 0px;
    margin: 0px;
    font-family: "Century Schoolbook L","Bookman Old Style",serif;
    font-style: italic;
    flex: 1 1 content;
    text-align: right;
}

img.untertitel_feed {
    display: block;
    padding: 0px;
    margin: 0px;
    margin-right: 0.5em;
    width: 1em; 
    height: 1em;
    flex: 0 0 content;
}

a.untertitel_feed {
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

/*
 * Fußnoten, Bemerkungen, die am Ende eines Abschnitts auftauchen.
 */
p.note {
  font-family: "Century Schoolbook L","Bookman Old Style",serif;
  font-style: italic;
  text-align: justify;
  padding: 0px;
  margin: 1em 0.5em;
}

/*
 * Zitat, Adressen..
 *
 * Eingerückter Absatz
 */
p.abgesetzt {
  text-align: justify;
  padding: 0px 0px 0px 3em;
  margin: 1em 0.5em;
}

/* ----------------------------------------------------------------------
 * Text hervorhebungen
 * ---------------------------------------------------------------------- */
.betont {
  font-style: italic;
}

tt {
}

code {
  font-family: monospace;
  font-weight: bold;
}

/* ----------------------------------------------------------------------
 * Verweise
 * ---------------------------------------------------------------------- */

a { text-decoration: none; padding: 0px; margin: 0px;}
/* Farben */
a:link { color: var(--linkrot);}
a:active { color: red; }
a:visited { color: var(--linkbeige); }
a:hover { }


/*
 * interner Verweis
 */
a.int {
}

/*
 * externer Verweis
 */
a.ext {
}


/* ----------------------------------------------------------------------
 * Stichwort mit Erläuterung
 * ---------------------------------------------------------------------- */

/*
 * Abschnitt, der einen Begriff erklärt. Erstet Wort mit span.stichw
 * gekennzeichent.
 */
p.stichw {
  text-align: justify;
  padding: 0px;
  padding-left: 4ex;
  margin: 1em 0.5em;
  text-indent: -4ex; 
}

span.stichw {
  font-weight: bold;
}


/* ----------------------------------------------------------------------
 * Aufzählungen
 * ---------------------------------------------------------------------- */

ul {
}

li.ul {
  text-align: justify;
  padding: 0px;
  margin: 1ex 0.5em;
}

ol {
}

li.ol {
  text-align: justify;
  padding: 0px;
  margin: 1ex 0.5em;
}

/* ----------------------------------------------------------------------
 * Literaturverzeichnis
 * ---------------------------------------------------------------------- */

p.lit {
    padding-left: 2em;
    text-indent: -2em;
}

/* ----------------------------------------------------------------------
 *  Bild
 * ---------------------------------------------------------------------- */

/*
 * Abschnitt für ein Bild.
 *
 * Kann ein oder mehrere Bilder enthalten.
 * Es kann eine kleine Bildunterschrift enthalten sein.
 *
 * Maximale Bildbreite erfahrungsgemäß 600 px
 */
figure.Bilderrahmen {
  padding: 0.3em;
  margin: 1em 0.5em;
  border: thin solid;
  /* Farben */
  border-color: var(--rahmenfarbe);
}

/*
 * Enthält ein oder mehrere Bilder. 
 * Die Bilder sind Blockelemente.
 */
figure.Bilder {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 0px;
  padding: 0px;
}

/*
 * Bildunterschrift
 */
figcaption {
  margin: 0px;
  padding: 0px;
  font-family: "Century Schoolbook L","Bookman Old Style",serif;
  text-align: center;
}

/* 
 * Ein normals Bild
 * Blockelement, damit kein Zeilenabstand (Abstand zum Rahmen) entsteht.
 */
img.imRahmen {
  display: block;
  border: none;
  margin: 0px;
  padding: 0px;
  /* width wird im style-Attribute evtl. auch angegeben. */
  /* max-width: 100%; staucht in x-Richtung -> height:auto hilft. */
  max-width: 100%;
  height: auto;
}

/*
 * Ein ASCII Bild, wird ohne p.img benutzt
 */
pre.asc {
  text-align: left;
  padding: 0px 0.5ex;
  margin: 1em 0.5em;
  border: thin dotted;
  overflow: auto;
  /* Farben */
  background-color: var(--sand);
  border-color: var(--rahmenfarbe);
}

/*
 * Farben für ASCII-Bilder
 */
span.darkred{ color: var(--linkrot); }
span.red { color:red; }
span.darkgreen { color: #80c000; }
span.green { color: #80ff00; }
span.black { color:black; }
span.white { color:white; }
span.yellow { color: rgb(249,225,0); }
span.brown { color: saddlebrown; }
span.gold { color: darkkhaki; }
span.blue { color: var(--mittelblau); }
span.darkblue { color: var(--dunkelblau); }
span.darkdarkblue { color: rgb(13,11,52); }

/* ----------------------------------------------------------------------
 *  Mathe als Bild
 * ---------------------------------------------------------------------- */

img.latexmath {
    display: block;
    padding: 0px;
    margin: 1em 0.5em;
    max-width: 100%;
    height: auto;
}

/* ----------------------------------------------------------------------
 *  Audio
 * ---------------------------------------------------------------------- */

div.audioframe {
    text-align: right;
    margin: 1em 0.5em;
    padding: 0.3ex;
    border: thin solid;
    /* Farben */
    border-color: var(--rahmenfarbe);
}

p.audio {
    font-family: "Century Schoolbook L","Bookman Old Style",serif;
    margin: 0px;
    padding: 0px 1ex 0px 0px;
    vertical-align: middle;
    display: inline-block;
}

audio {
    vertical-align: middle;
}

/* ----------------------------------------------------------------------
 *  Video
 * ---------------------------------------------------------------------- */

div.videoframe {
    padding: 0.3ex;
    margin: 1em 0.5em;
    border: thin solid;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    /* Farben */
    border-color: var(--rahmenfarbe);
}

p.video {
    margin: 0px;
    padding: 0px;
    font-family: "Century Schoolbook L","Bookman Old Style",serif;
    text-align: center;
}

video {
      display: block;
      border: none;
      margin: 0px;
      padding: 0px;
      /* max-width: 100%; staucht in x-Richtung -> height:auto hilft. */
      max-width: 100%;
      height: auto;
}

/* ----------------------------------------------------------------------
 * präformatierter Text
 * ---------------------------------------------------------------------- */

pre.text {
  padding: 0px;
  margin: 1em 0.5em;
  width: 100%;
  overflow: auto;
}

/* ----------------------------------------------------------------------
 * Tabellen
 *
 * Eine Tabelle kann zwei Zeilentypen haben:
 * class=a  normale Zeile
 * class=b  Vorgehobene zeile
 * Im Tabellenkopf wird das Format in der Zelle definiert
 * ---------------------------------------------------------------------- */


table {
  margin: 0px auto;
  border: none;
  border-spacing: 0pt;
  empty-cells: show;
}

tr.a {
  /* Farben */
  background-color: var(--sand);
}

tr.b {
  /* Farben */
  background-color: var(--braun);
} 
td {
  text-align: left;
  padding: 0.1em 1em;
}

th {
  font-weight: bold;
  text-align: left;
  padding: 0.1em 1em;
  /* Farben */
  background-color: var(--mittelblau);
}


/* ----------------------------------------------------------------------
 * Kommentar-Formular
 * ---------------------------------------------------------------------- */

form.comment_add {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    padding: 0.5ex;
    margin: 1em 0.5em;
    border: thin solid var(--rahmenfarbe);
}

label.comment, span.comment_placeholder {
    padding: 0px;
    margin: 0px 0.5ex 0px 0px;
    text-align: right;
    grid-column: 1 / 2;
    align-self: center;
}

input.comment {
    font-family: monospace;
    padding: 0px;
    margin: 0.5ex;
    grid-column: 2 / 4;
}

textarea.comment {
    font-family: monospace;
    padding: 0px;
    margin: 0.5ex;
    grid-column: 2 / 4;
    justify-self: flex-start;
}

img.comment[alt="captcha"] {
    margin: 0.5ex;
    grid-column: 2 / 4;
}

button.comment_edit {
    padding: 0px;
    margin: 0ex 0ex;
    border: none;
    background: var(--hellblau);
}

button.comment {
    margin: 0.5ex;
}

button.comment[type="submit"] {
    grid-column: 2 / 3;
}

button.comment[type="reset"] {
    grid-column: 3 / 4;
}

/* ----------------------------------------------------------------------
 * Kommentare
 * ---------------------------------------------------------------------- */

/* Kopf des Kommentars, Name */
p.comment_head {
    padding: 0.1em;
    margin: 1em 0.5em 0.2em 0.5em;
    font-weight: bold;
    color: var(--hellblau);
    background-color: var(--dunkelblau);
}

/* Datum, im comment_head, linksbündig */
span.comment_date {
  float: right;
}

/* Text des Kommentars */
pre.comment {
  padding: 0ex 0.5ex;
  margin: 0.2em 0.5em 0.2em 0.5em;
  overflow: auto;
  clear: both;
  border: thin dotted var(--rahmenfarbe);
}

pre.comment_reply {
  padding: 0ex 0.5ex;
  margin: 0.2em 0.5em 0.2em 0.5em;
  overflow: auto;
  background-color: var(--hellblau);
}

/* ----------------------------------------------------------------------
 * Menü
 * ---------------------------------------------------------------------- */

div.Menue {
    position: fixed;
    width: 12em;
    margin: 0px;
    padding: 1em;
    background: white;
    text-align: left;
}

div.MenueFuss {
    position: fixed;
    bottom: 0px;
    width: 12em;
    margin: 0pt;
    padding: 1em;
    background: var(--dunkelblau);
    text-align: left;
} 

p.MenuFuss {
    margin: 0px;
    padding: 0px;
    font-family: monospace;
    font-size: medium;
    font-weight: bold;
    color: #dcdcdc;
}

/* Abstand und Einrückung */

div.MenueEintragP { /* Projekthauptseite */
    padding: 0.1em 0em 0.1em 0.5em;
    text-indent: -0.5em;
}

div.MenueEintragA { /* aktuelles Seite */
    padding: 0.1em 0em 0.1em 0.5em;
    text-indent: -0.5em;
}

div.MenueEintrag1 { /* Home, Impressum */
    padding: 0.1em 0em 0.1em 0.0em;
}

div.MenueEintrag2 { /* Andere Seite im Projekt */
    padding: 0.1em 0em 0.1em 0.5em;
    text-indent: -0.5em;
}

div.MenueEintrag3 { /* Abschnitt */
    padding: 0.1em 0em 0.1em 2.0em;
    text-indent: -1.0em;
}

/* Schrift und Farbe */

a.MenueEintragP { /* Projekthauptseite */
    font-weight: bold;
    font-style: normal;
    color: var(--schriftfarbe);
}

a.MenueEintragA { /* aktuelles Seite */
    font-weight: normal;
    font-style: oblique;
    color: var(--schriftfarbe);
}

a.MenueEintrag1 { /* Home, Impressum */
    font-weight: bold;
    font-style: normal;
    color: var(--linkrot);
}

a.MenueEintrag2 { /* Andere Seite im Projekt */
    font-weight: normal;
    font-style: normal;
    color: var(--schriftfarbe);
}

a.MenueEintrag3 { /* Abschnitt */
    font-weight: normal;
    font-style: italic;
    color: var(--dunkelblau);
}

/* ----------------------------------------------------------------------
 * Warnschild
 *
 * auffälliger Sicherheitshinweis
 * ---------------------------------------------------------------------- */

div.warnung {
  padding: 1ex;
  margin: 1em 10px;
  border: thick double  #e00000;
  background-color:yellow;
  color: #e00000;
}

p.warnung {
  text-indent: 0em; 
  font-weight: bold;
}

h2.warnung {
  text-align: center; 
  text-decoration: underline;
}

/* ----------------------------------------------------------------------
 * Hinweis
 * 
 * Nicht ganz so auffälig wie Warnung.
 * ---------------------------------------------------------------------- */

div.hinweis {
  padding: 0ex;
  margin: 1em 0.5em;
  border: medium solid var(--dunkelbraun);
  background-color: var(--sand);
  color: var(--schriftfarbe);
}

p.hinweis {
  padding: 0.5ex;
  margin: 0.5ex;
}

span.hinweis{
  font-weight: bold;
  color: #5d5b84;
}

/* ----------------------------------------------------------------------
 * Rechnungsformulare
 * 
 * Nicht ganz so auffälig wie Warnung.
 * ---------------------------------------------------------------------- */

fieldset.Rechnung { }
legend.Rechnung { }

/* Eine Kachelgruppe enthält:
 * Folge von 
 *	label.GroesseSymbol
 *	input.GroesseWert
 *	span.GroesseEinheit
 *
 * Statt der dieser Folte kann ein Element
 *	div.RechnungOptionsgruppe
 * kommen. Es enthäle beliebig viele Elemente
 *	.Rechnungsoption
 */

div.RechnungsGruppe {
    display: grid;
    /*grid-template-columns: repeat(auto-fill, 9ex 12ex 9ex);*/
    grid-template-columns: repeat(auto-fill, 6ex 9ex 6ex);
    align-items: center;

    padding: 0.5ex 0px;
    margin: 0.5ex 0px;
    background-color: #dcdcdc;
}

.GroesseSymbol {
    display: inline-block;
    padding: 0px 0.5ex 0px 0px;
    margin: 0px;
    text-align: right;
}

.GroesseWert {
    display: inline-block;
    padding: 0px;
    margin: 0.2ex 0px;
    text-align: right;
}

.GroesseEinheit {
    display: inline-block;
    padding: 0px 0px 0px 0.5ex;
    margin: 0px;
    text-align: left;
}

input.Rechnungsbutton {
    grid-column: span 3;
}

.RechnungOptionsgruppe {
    grid-column: span 3;
}

/* Kommt vor bei:
 *   label 
 *   input chekcbox, input radio 
 *   div (damit input und label nicht umgebrochen werden)
 */
.Rechnungsoption {
}

fieldset.RechnungsAuswahl { 
}
legend.RechnungsAuswahl { }

/* ----------------------------------------------------------------------
 * Weblog
 *
   <div id="xxx" class=blog_entry>
        <div class=blog_img_div> 
            <a href=""><img class=blog_img src="" alt=""></a>
        </div>
        <div class=blog_text_div>
            <p class=blog_text_head>Titel</p>
            <p class=blog_text_date>Datum</p>
            <p class=blog_text>Text</p>
        </div>
    </div>
 * ---------------------------------------------------------------------- */
div.blog_entry {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 1em 0em; /* Der rechts-links-Abstand wird von den Flex-containern
			.blog_img_div und .blog_text_div gemacht, damit er
			auch beim Umbrechen noch da ist.*/
}

div.blog_img_div {
    flex: 1 0 10em;
    padding: 0px;
    margin: 0px 0.5em;
}

img.blog_img {
    padding: 0px;
    margin: 0px;
    height: auto;
    width: 100%;
}

div.blog_text_div {
    flex: 1000 0 10em;
    margin: 0px 0.5em;
}

p.blog_text_head {
    font-weight: bold;
    padding: 0px;
    margin: 0px;
    border-bottom: thin solid;
    border-color: var(--rahmenfarbe);
}

p.blog_text_date {
    font-family: "Century Schoolbook L","Bookman Old Style",serif;
    font-style: italic;
    font-size: smaller;
    padding: 0px;
    margin: 0px 0px 0.5ex 0px;
}

p.blog_text {
    padding: 0px;
    margin: 0px;
}


/* ----------------------------------------------------------------------
 * Impressum
 * ---------------------------------------------------------------------- */

img.impressum {
  margin: 0px;
  padding: 0px;
  border: none;
  vertical-align: text-top;
}

table.impressum {
  margin: 1em 0.5em; /* wie im normalen Text p */
  padding: 0px;
  border: none;
  background-color: silver;
}

tr.impressum {
}

td.impressum {
  margin: 0px;
  padding: 0px;
  border: none;
}

/* ----------------------------------------------------------------------
 * Fusszeile
 * ---------------------------------------------------------------------- */

div.fuss {
    display: flex;
    flex-wrap: nowrap;
    padding: 1.0ex 0.5em 0px 0.5em;
    margin: 0px;
    border-top: thin solid var(--rahmenfarbe);
}

div.fuss-links {
    display: flex;
    flex: 1 1 content; 
    flex-wrap: wrap;
    gap: 0.5ex 1ex;
    justify-content: flex-start;
    padding: 0px;
    margin: 0px;
}

div.fuss-rechts {
    display: flex;
    flex: 1 1 content; 
    flex-wrap: wrap;
    gap: 0.5ex 1ex;
    justify-content: flex-end;
    padding: 0px;
    margin: 0px;
}

img.fuss {
    flex: 0 0 content;
    display: block;
    padding: 0px;
    margin: 0px;
}

/* ----------------------------------------------------------------------
 * formica Index
 * ---------------------------------------------------------------------- */

pre.formica_kopf { 
    color: var(--schriftfarbe);
    background-color: white;
    font: bold 5pt/5pt monospace; 
    padding: 10pt;
    margin: 0pt;
    text-align: left;
}

div.IndexEintrag {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0px;
    margin: 1.0ex 0.5em;
}

div.IndexBild { 
    flex: 0 0 content;
    background-color: #c0c0c0;
    background-image: url(bgs.png);
    padding: 10pt; 
    margin: 0px;
    margin-right: 1ex;
    height: 64pt; /* Höhe des pre.IndexBild: 12 Zeilen * 5pt + 4pt padding */
}

pre.IndexBild { 
    color: #c0c0c0; 
    background-color: var(--dunkelblau);
    font: bold 5pt/5pt monospace; 
    padding: 2pt;
    margin: 0pt;
}

p.IndexText {
    flex: 1 1 0%; /* auto */
    text-align: left;
    padding: 0px;
    margin: 0px;
}