/* ./template.css
 ******************************************************************************
 * HuSvEDVF-Template von Hilfe und Service von EDV-Fachleuten. (Template)     *
 * ========================================================================== *
 * Copyright by Hilfe & Service von EDV-Fachleuten                            *
 *              Reilstr. 6, D-06114 Halle (Saale)                             *
 *              Tel. (0345) 521 13 40                                         *
 * Edit v2.020 from 2019-09-02 to 2021-07-02 by TSc                           *
 * -------------------------------------------------------------------------- *
 * Diese CSS-Datei beschreibt Formatierungen,                                 *
 * die nur das Template bzw. Boxmodel selbst betreffen.                       *
 ******************************************************************************/


/******************************************************************************
 * Header                                                                     *
 ******************************************************************************/

/******* Allgemein ************************************************************/
body>header {
 background-color: var(--colorContent);
 border: 1px solid var(--colorBorder);
 color: var(--colorHeading);
 font-size: larger;
 font-weight: bold;
 margin: 5px 5px 0 5px;
 padding: 20px 0 20px 0;
 position: relative;
 text-align: center;
 vertical-align: middle;
 }

/******** Ab 345px passt der linke Teil unseres Logos hinein ******************/
@media screen and (min-width: 340px) {
 body>header { /* Text unsichtbar machen und Hoehe anpassen */
  color: transparent;
  height: 100px;
  padding: 0;
  }
 body>header:before { /* Pseudo-Bild-Element mit 340px Breite */
  background-attachment: local;
  background-clip: content-box;
  background-image: url('./../hus00h.png');
  background-origin: content-box;
  background-position: left 3px;
  background-repeat: no-repeat;
  background-size: 950px 100px;
  bottom: 0;
  content: ' ';
  display: block;
  left: 0;
  margin: auto;
  height: 100px;
  position: absolute;
  right: 0;
  top: 0;
  width: 340px;
  }
 }

/******** Ab 950px passt unser gesamtes Logo hinein ***************************/
@media screen and (min-width: 950px) {
 body>header:before { /* Pseudo-Bild-Element mit 950px Breite */
  width: 950px;
  }
 }


/******************************************************************************
 * Menue                                                                      *
 ******************************************************************************/

/******* Sprungposition von Anker-Fragmenten verschieben **********************/
html {
 scroll-padding-top: 50px;
 }

/******* Allgemein ************************************************************/
body>nav {
 background-color: var(--colorContent);
 border: 1px solid var(--colorBorder);
 box-shadow: 0px 0px 5px 5px var(--colorContent);
 margin: 5px 5px 0 5px;
 position: static;
 text-align: center;
 top: 5px;
 z-index: 100;
 }

/******* Wenn der Bildschirm grosz genug ist, Sticky-Menue verwenden **********/
@media only screen and (min-height: 600px) {
 body>nav {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  }
 }

/******* Uniformierte Liste (Ebene 1) *****************************************/
body>nav>ul {
 display: inline;
 list-style-type: none;
 overflow: hidden;
 padding: 0;
 }

/******* Listenpunkt in uniformierter Liste (Ebene 1) *************************/
body>nav>ul>li {
 display: inline;
 }

/******* Listenpunkt in uniformierter Liste (Ebene 1) mit Untermenue **********/
body>nav>ul>li.sub {
 display: inline-block;
 text-align: left;
 }

/******* Listenpunkt fuer Skalierung ausblenden (behandelt von Javascript) ****/
body>nav>ul>li#templateScalingBigger,
body>nav>ul>li#templateScalingSmaller {
 display: none;
 }

/******* Anker in Listenpunkt (Ebene 1) ***************************************/
body>nav>ul>li>a {
 display: inline-block;
 padding: 10px;
 text-align: center;
 text-decoration: none;
 }

/******* Bezeichnung im Anker (Ebene 1) ***************************************/
body>nav>ul>li>a>span {
 display: none;
 }

/******* Ankerbeschriftung wird angezeigt, wenn genug Platz ist ***************/
@media only screen and (min-width: 850px) {
 body>nav>ul>li>a>span {
  display: inline;
  }
 }

/******* Untermenue (Ebene 2) *************************************************/
body>nav>ul>li.sub>div {
 background-color: var(--colorContent);
 border: 1px solid var(--colorBorder);
 box-shadow: 0px 0px 5px 5px var(--colorContent);
 display: none;
 margin-top: -5px;
 min-width: 50px;
 padding: 5px 5px 15px 5px;
 position: absolute;
 z-index: 100;
 }

/******* Wenn Breite kleiner 420px, hefte Untermenue "Kontakt" rechts an ******/
@media only screen and (max-width: 420px) {
 body>nav>ul>li.sub>div.contact,
 body>nav>ul>li.sub>div.opening {
  right: 5px;
  }
 }

/******* Wenn Breite kleiner 240px, hefte alle Untermenues rechts an **********/
@media only screen and (max-width: 240px) {
 body>nav>ul>li.sub>div {
  right: 5px;
  }
 }

/******* Uniformierte Liste in Untermenue (Ebene 2) ***************************/
body>nav>ul>li.sub>div>ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 }

/******* Untermenue (Ebene 2) bei Hover anzeigen ******************************/
body>nav>ul>li.sub:hover div {
 display: block;
 }


/******************************************************************************
 * Content                                                                    *
 * Struktur:                                                                  *
 * + <article> = Wurzel-Element eines Artikels (sehr wichtig)                 *
 *   - <header> = Kopfzeile (aka .LgEdTtNz) ist immer Einspaltig              *
 *   - <nav> = Linkliste (aka .LkLst) ist mindestens Einspaltig               *
 *   - <section> = Inhaltssektion (aka .Inhalt) ist mindestens Einspaltig     *
 *   - <footer> = Fuszzeile (neu dazu gekommen) ist immer Einspaltig          *
 * Referenz: https://css-tricks.com/snippets/css/complete-guide-grid/         *
 *           https://css-tricks.com/snippets/css/a-guide-to-flexbox/          *
 ******************************************************************************/

/******* Allgemein ************************************************************/
body>main {
 margin-bottom: 0px;
 margin-left: 5px;
 margin-right: 0px;
 margin-top: 5px;
 }

/******* Artikel **************************************************************/
body>main>article {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr 1fr;
 grid-template-rows: auto auto auto auto;
 flex-flow: column wrap;
 overflow-y: auto;
 z-index: 0;
 }

/******* Artikelelemente (Standardkonfiguration) ******************************/
body>main>article>header,
body>main>article>nav,
body>main>article>section,
body>main>article>footer {
 background-color: var(--colorContent);
 border: 1px solid var(--colorBorder);
 margin: 0 5px 5px 0;
 min-height: 0; /* TSc: Damit overflow richtig funktioniert */
 min-width: 0; /* TSc: Damit overflow richtig funktioniert */
 padding: 10px;
 }
body>main>article>header:after,
body>main>article>nav:after,
body>main>article>section:after,
body>main>article>footer:after {
 content: '';
 clear: both !important;
 display: table;
 }

/******* Kopfzeile (aka LgEdTtNz) *********************************************/
body>main>article>header {
 grid-column: span 4;
 }

/******* Linkliste (aka LkLst) ************************************************/
body>main>article>nav {
 grid-column: span 4;
 }

/******* Sektion (aka Inhalt) *************************************************/
body>main>article>section {
 align-self: start;
 align-self: stretch; /* TSc: So lange es "masonry grid" nicht gibt... */
 grid-column: span 4;
 }
@-moz-document url-prefix() {
 body>main>article>section {
  align-self: stretch;
  }
 }

/******* Fuszzeile (neu) ******************************************************/
body>main>article>footer {
 grid-column: span 4;
 }

/******* Debug-Warnung ********************************************************/
main>p.debug.warning {
 background-color: var(--colorWarning);
 border: 1px solid var(--colorBorder);
 font-weight: bold;
 margin: 0 5px 5px 0;
 padding: 10px;
 }

/******* Wartungswarnung ******************************************************/
main>p.maintenance.warning {
 background-color: var(--colorWarning);
 border: 1px solid var(--colorBorder);
 font-weight: bold;
 margin: 0 5px 5px 0;
 padding: 10px;
 }

/******* Breite >= 500px ******************************************************/
@media only screen and (min-width: 500px) {
 body>main>article>nav {
  grid-column: span 2;
  }
 }

/******* Breite >= 1280px *****************************************************/
@media only screen and (min-width: 1280px) {
 body>main>article>section {
  grid-column: span 2;
  }
 main>p.maintenance.warning {
  text-align: center;
  }
 }

/******* Breite >= 2560px *****************************************************/
@media only screen and (min-width: 2560px) {
 body>main>article>section {
  grid-column: span 1;
  }
 main>p.debug.warning {
  text-align: center;
  }
 }

/******* Links fuer grobe Zeigegeraete (z.B. Finger) **************************/
@media only screen and (pointer: coarse) {
 body>main a {
  background-color: var(--colorOverflow);
  border: 1px dashed var(--colorBorder);
  display: inline-block;
  margin: 1px;
  overflow-wrap: anywhere;
  padding: 0.8rem; /* TSc: Google sagt 0.8em */
  }
 body>main a:before {
  content: '\1F517\00A0';
  }
 }


/******************************************************************************
 * Footer                                                                     *
 ******************************************************************************/

/******* Allgemein ************************************************************/
body>footer {
 background-color: var(--colorContent);
 border: 1px solid var(--colorBorder);
 margin: 0 5px 5px 5px;
 padding: 20px 0 20px 0;
 text-align: center;
 }


/******************************************************************************
 * Sprungmarke (Nach Oben)                                                    *
 ******************************************************************************/

/******* Allgemein ************************************************************/
body>a#gotop {
 background-color: var(--colorContent);
 border: 1px solid var(--colorBorder);
 border-radius: 5px;
 bottom: 10px;
 box-shadow: 0px 0px 5px 5px var(--colorContent);
 padding: 5px;
 display: none;
 position: fixed;
 right: 10px;
 z-index: 100;
 }

/******* Beschriftung standardmaeszig nicht anzeigen **************************/
body>a#gotop>span {
 display: none;
 }

/******* Beschriftung anzeigen, wenn die Anzeige breit genug ist **************/
@media only screen and (min-width: 780px) {
 body>a#gotop>span {
  display: inline;
  }
 }


/******************************************************************************
 * Directory Indexing                                                         *
 ******************************************************************************/

/******* Allgemein ************************************************************/
article#indexDirectory>section.listing {
 grid-column: span 4;
 }

/******* Kopf und Eintrag *****************************************************/
article#indexDirectory>section.listing>div.table>div.header,
article#indexDirectory>section.listing>div.table>div.entry {
 display: flex;
 flex-wrap: wrap;
 gap: 5px;
 overflow-wrap: break-word;
 }

/******* Kopf *****************************************************************/
article#indexDirectory>section.listing>div.table>div.header {
 font-weight: bold;
 }

/******* Zellen ***************************************************************/
article#indexDirectory>section.listing>div.table>div>span {
 border: 1px solid var(--colorBorder);
 padding: 3px;
 margin-bottom: 5px;
 }

/******* Zellen im Kopf *******************************************************/
article#indexDirectory>section.listing>div.table>div.header>span {
 text-align: center !important;
 }

/******* Index-Spalte rechts ausrichten ***************************************/
article#indexDirectory>section.listing>div.table>div.header>span.index,
article#indexDirectory>section.listing>div.table>div.entry>span.index {
 text-align: right;
 width: 2rem;
 }

/******* Namensspalten ausbreiten *********************************************/
article#indexDirectory>section.listing>div.table>div.header>span.name,
article#indexDirectory>section.listing>div.table>div.entry>span.name {
 flex: 1;
 }

/******* Datumsspalte rechts ausrichten ***************************************/
article#indexDirectory>section.listing>div.table>div.header>span.date,
article#indexDirectory>section.listing>div.table>div.entry>span.date {
 text-align: right;
 width: 10rem;
 }

/******* Groeszenspalte rechts ausrichten *************************************/
article#indexDirectory>section.listing>div.table>div.header>span.size,
article#indexDirectory>section.listing>div.table>div.entry>span.size {
 text-align: right;
 width: 6rem;
 }

/******* Groesze und Typ ******************************************************/
article#indexDirectory>section.listing>div.table>div>span.size,
article#indexDirectory>section.listing>div.table>div>span.type {
 width: 10rem;
 }

/******* Zusammenfassungszeile ************************************************/
article#indexDirectory>section.listing>div.table>div.summary {
 border: 1px solid var(--colorBorder);
 font-weight: bold;
 padding: 3px;
 text-align: center;
 }

/******* Wenn der Bildschirm kleiner 780px ist ********************************/
@media only screen and (max-width: 779px) {
 article#indexDirectory>section.listing>div.table>div {
  display: block;
  }
 article#indexDirectory>section.listing>div.table>div>span {
  border: 0;
  padding: 0;
  text-align: left !important;
  width: auto;
  }
 article#indexDirectory>section.listing>div.table>div.entry>span.name {
  flex: unset;
  }
 article#indexDirectory>section.listing>div.table>div.header,
 article#indexDirectory>section.listing>div.table>div.summary,
 article#indexDirectory>section.listing>div.table>div>span.index,
 article#indexDirectory>section.listing>div.table>div>span.date,
 article#indexDirectory>section.listing>div.table>div>span.size,
 article#indexDirectory>section.listing>div.table>div>span.type {
  display: none;
  }
 }


/******************************************************************************
 * Sonstiges                                                                  *
 ******************************************************************************/


/******* EOF ******************************************************************/