/* Wolfgang Bock */
/* 2025-06-02 */
/* Innenabstand/Padding geht so: */
/* 4 Werte: oben rechts unten links */
/* 3 Werte: oben links+rechts unten */
/* 2 Werte: oben+unten links+rechts */

/* Farben */
/*
#FFFFFF - weiss
#484848 - grau         rgb(100,100,100)
#034DA2 - bne-blau     rgb(3,77,162)
#0000EE - klares blau  rgb(0,0,238);
#3f51b5 - w3indigo     rgb(63,81,181)
#53B2A6 - bne-tuerkis  rgb(83,178,166)
#F6821F - bne-orange   rgb(246,130,31)
#EE0000 - rot          rgb(238,0,0)
#009900 - gruen        rgb(0,153,0)
#FFFF00 - gelb         rgb(255,255,0)
#604734 - pauli-braun
*/

/* Festlegung des Zeichensatzes */
@charset "utf-8";

@font-face
{
font-family: 'GillSans';
src: url('./fonts-gill/gill-sans.woff2') format('truetype');
}
@font-face
{
font-family: 'RotisSans';
src: url('./fonts-rotis-sans/rotis_sans.woff2') format('truetype');
}
@font-face
{
font-family: 'FrutigerRoman';
src: url('./fonts-frutiger-roman/frutiger-roman.woff2') format('truetype');
}

/* Quelle: https://wiki.selfhtml.org/extensions/Selfhtml/frickl.php/Beispiel:CSS3_Flexbox-1.html */

body {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
}

/* Mit margin wird der Außenabstand eines Elementes bestimmt. Die Margin kann für alle vier Seiten (top, right, bottom, left) konfiguriert werden */
/* oben rechts unten links */
/* padding beschreibt den Innenabstand eines Elementes zu seinem Rahmen. Die optische Polsterung kann dabei für alle vier Seiten des Elementes (top, right, bottom, left) festgelegt werden. */
/* wenn es mit dem footer bei nicht klappt, dann hier mal sehen: https://kulturbanause.de/blog/responsive-sticky-footer/ **/
header {
     position: sticky;
     top: 0;
     padding: 10px ;
     margin: 0px 10px 5px 10px ;
/*   margin: 10px; */
     background: #604734;
     color: #fff;
     width: 97%;
     line-height: 1.3;
     height: 5em;
}

main{
     padding: 10px;
     margin: 10px;
/*        position:absolute; top:100px; */
}

article {
     padding: 10px;
     margin: 10px;
/*     position:relative; top:3.75em; */
     background: #fff;
     -webkit-flex: 3 1 0%;
     flex: 3 1 0%;
}

/*** alt
footer {
     padding: 10px;
     margin: 10px;
     background: #604734;
     color: #fff;
     width: 97%;
     line-height: 1.3;
     height: 5em;
     position:sticky;
     bottom: 0;
a {
  color: #fff;
}
a:hover,
a:focus {
  color: #EE0000;
}
}
****/

/*** neuer footer flexible hoehe ***/
/** https://wiki.selfhtml.org/wiki/CSS/Tutorials/Flexbox/Feststehender_Footer#Feste_Breite_mit_flexiblem_padding **/
/*** a nicht vergessen **/
footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
        padding: 10px;
        margin: 5px;
/*	align-items: center; */
        height: 5em;
        color: #fff;
/*	background: #604734; hsl(0, 0%, 97%); */
	background: #604734;
a {
  color: #fff;
}
a:hover,
a:focus {
  color: #EE0000;
/*  text-decoration: underline; */
}
}










/* Schriftgroessen */
h1,h2,h3,h4,h5,h6
{
font-family:GillSans,sans-serif; margin:10px 0;
}
h1 {font-size:2.0em;font-weight:100;}
h2 {font-size:1.8em;font-weight:100;}
h3 {font-size:1.6em;font-weight:100;}
h4 {font-size:1.4em;font-weight:100;}
h5 {font-size:1.2em;font-weight:100;}
h6 {font-size:1.0em;font-weight:100;}

/* Tabellen mit und ohne Zebrastreifen */
/* nach https://www.dofactory.com/html/td/class */

table.tb4z { font-family : GillSans, sans-serif; font-size : 1.3em; }
.tb4z th { background: #ffffff; color: #000000; text-align:left;  }
.tb4z td { background: #ffffff; color: #034DA2; text-align:left;  }
.tb4z tr:nth-child(even) td { background-color: #e4ebf2; color: #000000; }

table.tb4 { font-family : GillSans, sans-serif; font-size : 1.3em; }
.tb4 th { background: #ffffff; color: #000000; text-align:left;  }
.tb4 td { background: #ffffff; color: #034DA2; text-align:left;  }

table.tb5z { font-family : GillSans, sans-serif; font-size : 1.2em; }
.tb5z th { background: #ffffff; color: #000000; text-align:left;  }
.tb5z td { background: #ffffff; color: #034DA2; text-align:left;  }
.tb5z tr:nth-child(even) td { background-color: #e4ebf2; color: #000000; }

table.tb5 { font-family : GillSans, sans-serif; font-size : 1.2em; }
.tb5 th { background: #ffffff; color: #000000; text-align:left;  }
.tb5 td { background: #ffffff; color: #009900; text-align:left;  }

/* Formatierung Absendebuttons und Tabellenkopf */
/* Schriftart und -groesse fuer die Tabelle */
.kopf /*grau fetter schraeg  */ {font-weight:100;font-style:italic;color:rgb(100,100,100);}
.eintragen /* gruen schraeg  */ {font-weight:100;font-style:italic;color:rgb(0,153,0);}
.aendern   /* blau schraeg   */ {font-weight:100;font-style:italic;color:rgb(0,0,238);}
.loeschen  /* rot schraeg    */ {font-weight:100;font-style:italic;color:rgb(238,0,0);}
.reset     /*grau schraeg    */ {font-weight:100;font-style:italic;color:rgb(100,100,100);}
.suchen    /*grau gerade     */ {font-weight:100;font-style:italic;color:rgb(100,100,100);}
.rot       /* rot            */ {font-weight:100;color:rgb(238,0,0);}
.tuerkis   /* tuerkis        */ {font-weight:100;color:rgb(83,178,166);}
.auswahl   /* grau           */ {font-weight:100;font-style:italic;color:rgb(100,100,100);}
/* menueschrift funxt nicht */
.menueschrift /* indigo      */ {font-weight:200;color:rgb(83,178,166);}

/* Alles fuer den Infoscreen-Kalender in wbock_infoscreen_monatskalender.css*/