/* ----------------------------------------------------------------------------------- */
/*              CSS zur Formatierung der Webseiten der WEB-Dorfchronik                 */
/*                    letzter Stand: Februar 2026 Christian Ernst                      */
/* ----------------------------------------------------------------------------------- */

@media (orientation: portrait) /* Bei Anzeige im Hochformat (Smartphone) */
{

html
  {
  background-color: #006600;
  }

.grid-container
  {
  font-size:        1em;
  font-family:      Ubuntu, "Times New Roman", Times, serif;
  background-color: #006600;
  height:           100vh;
  }

input.larger /* Checkboxgroesse in der Zeittafel*/
  {
  transform:  scale(4);
  }

}


@media (orientation: landscape) /* Bei Anzeige im Querformat (PC) */
{

html
  {
  background-color: lightgray;
  }

.grid-container
  {
  font-size:        0.6em;
  font-family:      Ubuntu, "Times New Roman", Times, serif;
  background-color: #006600;
  border:           6px solid #e0a100;
  width:            50%;
  margin-top:       2em;
  margin-bottom:    2em;
  margin-left:      auto;
  margin-right:     auto;
  }

input.larger /* Checkboxgroesse  in der Zeittafel */
  {
  transform: scale(3);
  }

}

.Zelle_Zeittafel_1_Hv /* Formatierung der Zeittafel-Jahreszahl */
  {
  font-size:      3.5em;
  font-weight:    bold;
  text-align:     center;
  color:          white;
  padding-top:    0.5em;
  padding-bottom: 0.5em;
  padding-left:   1em;
  padding-right:  1em;
  }

.Zelle_Zeittafel_2_Hv /* Formatierung der Zeittafel-Ereignis */
  {
  font-size:      2.6em;
  font-weight:    normal;
  text-align:     center;
  color:          white;
  padding-top:    0.2em;
  padding-bottom: 2em;
  padding-left:   1em;
  padding-right:  1em;
  }

.Zelle_Titel /* Ueberschrift in llen Zusatztexten */
  {
  font-size:      3.4em;
  font-weight:    bold;
  text-align:     center;
  color:          white;
  padding-top:    0.4em;
  padding-bottom: 0.4em;
  padding-left:   1em;
  padding-right:  1em;
  }

/* Bearbeitungsstand */

.Zelle_Untertitel           /* Formatierung Untertitel unter dem Titel */
  {
  font-size:      2.5em;    /* Textgroesse */
  text-align:     center;   /* Textausrichtung mittig */
  color:          white;    /* Textfarbe */
  margin-bottom:  2em;      /* Abstand unten */
  }

.Zelle_Untertitel_2         /* Formatierung Untertitel unter dem Titel */
  {
  font-size:      2.5em;    /* Textgroesse */
  text-align:     center;   /* Textausrichtung mittig */
  color:          white;    /* Textfarbe */
  margin-bottom:  0em;      /* Abstand unten */
  }


.Zelle_Zwischenueberschrift /* In den Tabellen */
  {
  font-size:      3em;      /* Textgroesse in der Kopfzeile */
  font-weight:    bold;     /* Fettschrift */
  text-align:     center;   /* Textausrichtung mittig */
  color:          white;    /* Textfarbe */
  padding-top:    1.4em;    /* Textabstand von oben */
  padding-bottom: 1em;      /* Textabstand von unten */
  padding-left:   1em;      /* Textabstand von links */
  padding-right:  1em;      /* Textabstand von rechts */
  }

.Zelle_Text                 /* Formatierung des Textblockes */
  {
  font-size:      2.6em;    /* Textgroesse im Textblock */
  text-align:     left;     /* Textausrichtung links */
  color:          white;    /* Textfarbe */
  padding-top:    0.4em;    /* Textabstand von oben */
  padding-bottom: 0.4em;    /* Textabstand von unten */
  padding-left:   1em;      /* Textabstand von links */
  padding-right:  1em;      /* Textabstand von rechts */
  }

.Zelle_Text_2               /* Formatierung des Textblockes */
  {
  font-size:      2.6em;    /* Textgroesse im Textblock */
  text-align:     left;     /* Textausrichtung links */
  color:          white;    /* Textfarbe */
  padding-top:    0.4em;    /* Textabstand von oben */
  padding-bottom: 0.4em;    /* Textabstand von unten */
  padding-left:   1em;      /* Textabstand von links */
  padding-right:  1em;      /* Textabstand von rechts */
  }

.Zelle_Button_Feld_Titelseite
  {
  display:          flex;
  justify-content:  space-around;
  margin-left:      auto;
  margin-right:     auto;
  padding-left:     2%;
  padding-right:    2%;
  text-align:       center;

  }

.Zelle_Button_Feld_Titelseite_Texte
  {
  padding-left:     5%;
  padding-right:    5%;
  font-size:        2em;
  color:            white;
  margin-bottom:    4%;
  }

.Zelle_Bild                 /* Formatierung des Bildblockes */
  {
  font-size:      2em;      /* Textgroesse des Bilduntertitels */
  text-align:     center;   /* Bildausrichtung mittig*/
  color:          white;    /* Textfarbe */
  padding-top:    2em;      /* Textabstand von oben */
  padding-bottom: 2em;      /* Textabstand von unten */
  }

.Zelle_Bild_Home            /* Formatierung der Bilder auf der Titelseite */
  {
  text-align:     center;   /* Bildausrichtung mittig */
  }

.Zelle_Ueberschrift         /* Formatierung des Kopfbildes */
  {
  text-align:     center;   /* Bildausrichtung mittig */
  }

.Zelle_Ueberschrift_Startseite
  {
  text-align:       center;   /* Bildausrichtung mittig */
  background-color: #006600;
  margin-bottom:    1vw;
  }


.Zelle_Strich               /* Formatierung des Striches am Ende */
  {
  font-size:      2em;      /* Textgroesse des Bilduntertitels */
  text-align:     center;   /* Bildausrichtung mittig*/
  color:          white;    /* Textfarbe */
  padding-top:    1em;      /* Textabstand von oben */
  margin-bottom:  2em;      /* Textabstand von unten */
  }

#img_bild_gross   /* Formatierung des Kopfbildes */
  {
  width:  80%;
  height: auto;
  }

#img_bild_mittel  /* Formatierung des Kopfbildes */
  {
  width:  60%;
  height: auto;
  }

#img_bild_klein   /* Formatierung des Kopfbildes */
  {
  width:  40%;
  height: auto;
  }

#img_bild_sehenswuerdigkeiten   /* Formatierung des Kopfbildes */
  {
  padding-top:    0em;
  margin-bottom:  0em;      /* Textabstand von unten */
  width:  80%;
  height: auto;
  }

#img_kopfbild     /* Formatierung des Kopfbildes */
  {
  width:  95%;
  height: auto;

  }

.Zelle_Quellenangabe       /* Formatierung der Quellenangaben */
  {
  font-size:      2.4em;   /* Textgroesse im Textblock */
  text-align:     left;    /* Textausrichtung links */
  color:          white;   /* Textfarbe */
  padding-top:    1em;     /* Textabstand von oben */
  padding-bottom: 1em;     /* Textabstand von unten */
  padding-left:   2em;     /* Textabstand von links */
  padding-right:  1em;     /* Textabstand von rechts */
  }

/* Suchen */

#eing_feld              /* Eingabefeld */
  {
  width:        175px;  /* Eingabefeld Laenge */
  height:       50px;   /* Eingabefeld Hoehe  */
  font-size:    30px;   /* Schriftgroesse     */
  }

.btn_2                       /* Lupe-Schaltflaeche */
  {
  background-color: white; /* Hintergrundfarbe der Lupe          */
  font-size:        40px;    /* Groesse der Lupe                   */
  margin-right:     30px;    /* Abstand zur Checkbox               */
  }



/* ---------------------------- Formatierung der Links ------------------------------- */

a:link
  { 
  font-size:       1em;        /* Textgroesse des Links */
  text-decoration: underline;  /* Links unterstrichen */
  color:           white;      /* Linktextfarbe */
  }
  
a:hover
  {
  color: gray; /* Linktextfarbe beim ueberstreichen */
  }
  
a:visited
  {
  color: white; /* Linktextfarbe nach dem "Besuch" */
  }

/* ------------------------------- Tabellen im Anhang -------------------------------- */

table                     /* Tabelle */
  {
  /* border:          3px solid blue; */
  border:          none;
  width:           95%;   /* Tabellenbreite */
  color:           white; /* Textfarbe in der Tabelle */
  font-size:       2em;   /* Textgroesse in der Tabelle */
  }


td                        /* Tabellenspalte */
  {
  /*  border:     3px solid blue; */
  border:         none;      /* Tabelle ohne Rahmen */
  padding-top:    0.5em;
  padding-bottom: 0.5em;
  }

#table_home /* nur fuer die Tabelle "Suchen" in der Zeittafel */
  {
  /*  border:     3px solid cyan;  */
  border:         none;
  margin-top:     2em;
  }

#td_home
  {
  /*  border:     3px solid blue; */
  border:         none;
  }

#table_suchen /* Tabelle "Suchen" in der Zeittafel, Breite der Tabelle */
  {
  /* border:       3px solid blue; */
  border:          none;
  width:           70%;
  }

#table_suchen_2 /* Tabelle "Suchen" in der Zeittafel, Breite Spalte 1 (Eingabefeld)  */
  {
  /*  border:     3px solid cyan; */
  border:         none;
  width:          40%;
  text-align:     right;
  vertical-align: middle;
  }

#table_suchen_3 /* Tabelle "Suchen" in der Zeittafel, Breite Spalte 2 (Lupe) */
  {
  /*  border:     3px solid green; */
  border:         none;
  width:          25%;
  text-align:     center;
  vertical-align: middle;
  }

#table_suchen_4 /* Tabelle "Suchen" in der Zeittafel, Breite Spalte 3 (Reversehaekchen) */
  {
  /*  border:     3px solid red; */
  border:         none;
  width:          20%;
  text-align:     right;
  padding-bottom: 0.8em;
  padding-right:  0.5em;
  }

#table_suchen_5 /* Tabelle "Suchen" in der Zeittafel, Breite Spalte 4 (Wort reverse) */
  {
  /*  border:     3px solid yellow; */
  border:         none;
  text-align:     left;
  vertical-align: middle;
  font-size:      1em;
  padding-bottom: 0.65em;
  padding-left:   0.5em;
  }

#table_lw /* nur fuer die Tabelle Landwirtschaft */
  {
  width:     80%;
  font-size: 2em;
  }

#table_bgm /* nur fuer die Tabelle Buergermeister */
  {
  width: 80%;
  }

#table_pf /* nur fuer die Tabelle Pfarrer */
  {
  width: 80%;
  }

#table_einwohner  /* nur fuer die Tabelle Einwohner in Geografie */
  {
  width: 30%;
  }

#table_kfz  /* nur fuer die Tabelle Kraftfahrzeuge in Wissenwertes */
  {
  width: 60%;
  }

/* --------------------------------- Besucherzaehler --------------------------------- */

.overlay                /* Textdarstellung beim ueberstreichen */
  {
  text-align: center;   /* Textausrichtung */
  color:      white;    /* Textfarbe */
  opacity:    0;        /* Transparenz (1 = nicht transparent) */
  transition: 1s ease;  /* Verzoegerung der Anzeige */
  }

.container:hover .overlay
  {
  opacity: 1;   /* Transparenz beim ueberstreichen (1 = nicht transparent) */
  }

/* --------------------------------- Zurueck-Pfeil ----------------------------------- */

.Zelle_zurueck  /* eine Ebene zurueck (oben links) */
{
  font-size:       2em;
  padding-left:    2.5vw;
}

#ohne_unterstrich           /* < zurueck-Link formatieren */
{
  text-decoration: none;    /* ohne Link-Unterstrich */
  color:           #dda105;
}

/* -------------------- Formatieren der Slideshow auf der Startseite ----------------- */

css-slides img
{
    opacity:                   0;
    animation-name:            fade;
    animation-duration:        12s;
    animation-iteration-count: infinite;
    position:                  absolute;
    left:                      0;
    right:                     0;
}

@keyframes fade
{
  0%      { opacity: 0; }  /** fadeIn beginnt            **/
  11.11%  { opacity: 1; }  /** Bild steht                **/
  33.33%  { opacity: 1; }  /** Bild bleibt zwei Sekunden **/
  44.44%  { opacity: 0; }  /** fadeOut beendet           **/
  100%    { opacity: 0; }
}

css-slides img:nth-child(1)
{ animation-delay: 0s; }

css-slides img:nth-child(2)
{ animation-delay: 3s; }

css-slides img:nth-child(3)
{ animation-delay: 6s; }

css-slides img:nth-child(4)
{ animation-delay: 9s; }

css-slides img:nth-child(5)
{ animation-delay: 12s; }

css-slides
{
  position:       relative;
  height:         0;
  padding-bottom: 49%;
  overflow:       hidden;
  display:        block;
  border:         #dda105 3px solid;
}

/* --------------------------------------- Ende -------------------------------------- */

.page-header /* wg. Joomla */
  {
  display: none;
  }