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

@media (orientation: portrait) /* Bei Anzeige im Hochformat (Smartphone), bis Programmzeile 71 */
{

html
  {
  background-color: #006600;
  }

.grid-container /* Haupt-Container */
  {
  font-size:        1em;
  font-family:      'Ubuntu', Roboto, 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  background-color: #006600;
  height:           100vh;
  }

h7 /* Quellenangaben unter Bildern */
  {
  font-size:  0.9em;
  font-style: italic;
  }

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

#table_wanderkarte  /* Tabellenbreite nur fuer die Legende der Wanderkarte */
  {
  width:     90%;
  font-size: 2.5em;
  }

#table_landwirtschaft  /* Tabellenbreite nur fuer die Tabelle Landwirtschaft */
  {
  width:     95%;
  font-size: 2em;
  }

#table_einwohnerzahl  /* Tabellenbreite nur fuer die Tabelle Einwohnerzahl */
  {
  width:     40%;
  font-size: 2em;
  }

#table_anwesen  /* Tabellenbreite nur fuer die Tabelle Anwesen */
  {
  width:     95%;
  font-size: 2em;
  }

#table_gewerbe  /* Tabellenbreite nur fuer die Tabelle Gewerbe */
  {
  width:     95%;
  font-size: 2em;
  }

#table_fotografen  /* Tabellenbreite nur fuer die Tabelle der Fotografen */
  {
  width:     90%;
  font-size: 2em;
  }

}

/* ------------------------------------------------------------------------------------- */

@media (orientation: landscape) /* Bei Anzeige im Querformat (PC), bis Programmzeile 147 */
{

html
  {
  background-color: #fff9eb;
  }

.grid-container /* Haupt-Container */
  {
  font-size:        0.6em;
  font-family:      'Ubuntu', Roboto, 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  background-color: #006600;
  border:           6px solid #e0a100;
  width:            60%;
  margin-top:       2em;
  margin-bottom:    2em;
  margin-left:      auto;
  margin-right:     auto;
  }

h7 /* Quellenangaben unter Bildern */
  {
  font-size:  0.8em;
  font-style: italic;
  }

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

#table_wanderkarte  /* Tabellenbreite nur fuer die Legende der Wanderkarte */
  {
  width:     60%;
  font-size: 2.5em;
  }

#table_landwirtschaft  /* Tabellenbreite nur fuer die Tabelle Landwirtschaft */
  {
  width:     65%;
  font-size: 2.5em;
  }

#table_einwohnerzahl  /* Tabellenbreite nur fuer die Tabelle Einwohnerzahl */
  {
  width:     30%;
  font-size: 2.5em;
  }

#table_anwesen  /* Tabellenbreite nur fuer die Tabelle Anwesen */
  {
  width:     70%;
  font-size: 2.5em;
  }

#table_gewerbe  /* Tabellenbreite nur fuer die Tabelle Gewerbe */
  {
  width:     75%;
  font-size: 2.5em;
  }

#table_fotografen  /* Tabellenbreite nur fuer die Tabelle der Fotografen in home_archiv.html*/
  {
  width:     80%;
  font-size: 2.2em;
  }
}

/* ------------------------------------------------------------------------------------- */

.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 allen 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;
  }

.Zelle_Untertitel /* Untertitel in Wissenwertes und Landwirtschaft */
  {
  font-size:      2.5em;
  text-align:     center;
  color:          white;
  margin-bottom:  2em;
  }

.Zelle_Untertitel_2  /* Untertitel Sehenswürdigkeiten */
  {
  font-size:      2.5em;
  text-align:     center;
  color:          white;
  }

.Zelle_Zwischenueberschrift /* Zwischenueberschrift in den Tabellen Gewerbe */
  {
  font-size:      3em;
  font-weight:    bold;
  text-align:     center;
  color:          white;
  padding-top:    1.4em;
  padding-bottom: 1em;
  padding-left:   1em;
  padding-right:  1em;
  }

/* Bearbeitungsstand */

.Zelle_Text /* Formatierung in den Kurztexten der Zeittafel und Wissenswertes */
  {
  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 /* Formatierung der Buttons auf der Startseite */
  {
  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 /* Formatierung der Button-Texte auf der Startseite */
  {
  padding-left:     5%;
  padding-right:    5%;
  font-size:        2em;
  color:            white;
  margin-bottom:    4%;
  }

.Zelle_Bild /* Formatierung der Bilder in den Kurztexten und Sehenswürdigkeiten */
  {
  font-size:      2em;
  text-align:     center;
  color:          white;
  padding-top:    2em;
  padding-bottom: 2em;
  }

.Zelle_Ueberschrift /* Formatierung der Überschriften in den Kurztexten u.v.a. */
  {
  text-align: center;
  }

.Zelle_Ueberschrift_Startseite /* Formatierung der Überschrift in der Startseite */
  {
  text-align:       center;
  background-color: #006600;
  margin-bottom:    1vw;
  }

.Zelle_Strich /* Formatierung des Striches am Ende */
  {
  font-size:      2em;
  text-align:     center;
  color:          white;
  padding-top:    1em;
  margin-bottom:  2em;
  }

#img_bild_gross /* Formatierung von Bildern 80% Groesse */
  {
  width:  80%;
  height: auto;
  }

#img_bild_mittel /* Formatierung von Bildern 60% Groesse */
  {
  width:  60%;
  height: auto;
  }

#img_bild_klein /* Formatierung von Bildern 40% Groesse */
  {
  width:  40%;
  height: auto;
  }

#img_kopfbild /* Formatierung des Kopfbildes auf allen Seiten */
  {
  width:  100%;
  height: auto;

  }

.Zelle_Quellenangabe /* Formatierung der Quellenangaben am Ende der Kurztexte */
  {
  font-size:      2.4em;
  text-align:     left;
  color:          white;
  padding-top:    1em;
  padding-bottom: 1em;
  padding-left:   2em;
  padding-right:  1em;
  }

#eing_feld /* Eingabefeld am Anfang der Zeittafel */
  {
  width:     175px;
  height:    50px;
  font-size: 30px;
  }

.btn_lupe /* Lupe-Schaltflaecheam Anfang der Zeittafel */
  {
  background-color: white;
  font-size:        40px;
  margin-right:     30px;
  }

a:link /* Formatierung der Links */
  { 
  font-size:       1em;
  text-decoration: underline;
  color:           white;
  }
  
a:hover
  {
  color: #e0a100; /* Linktextfarbe beim ueberstreichen */
  }
  
a:visited
  {
  color: white; /* Linktextfarbe nach dem "Besuch" */
  }

#link_karte
  {
  color:           white;
  font-size:       1em;
  text-decoration: none;
  }

#link_karte:hover
  {
  color: #dda105;
  }

table /* Formatieren einer Tabelle */
  {
  /* border: 3px solid blue; */
  border:    none;
  width:     95%;
  color:     white;
  font-size: 2em;
  }

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

#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_bgm /* Tabellenbreite nur fuer die Tabelle Buergermeister in Rathaus */
  {
  width: 80%;
  }

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

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

.overlay /* Formatieren der Anzeige des Besucherzaehlers */
  {
  text-align: center;
  color:      white;
  opacity:    0;
  transition: 1s ease;
  }

.container:hover .overlay /* Formatieren der Anzeige des Besucherzaehlers */
  {
  opacity: 1;
  }

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

#ohne_unterstrich /* Formatierung des Zurueck-Pfeiles, Link ohne Unterstrich */
{
  text-decoration: none;
  color:           #dda105;
}

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

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

@keyframes fade
{
  0%     { opacity: 0; }
  6.67%  { opacity: 1; }
  20%    { opacity: 1; }
  26.6%  { opacity: 0; }
  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;
}

/* -------------------- Formatieren der Icons auf der Wanderkarte ----------------- */

.map-container {
    position:  relative;
    display:   inline-block; /* Container passt sich der Bildgroesse an */
    width:     100%;
}

.map-image {
    width:   100%; /* Bild füllt den Container */
    height:  auto;
    display: block;
}

.hover-bild /* Bild verstecken */
{
  display:  none;
  position: absolute;
  width:    300px;
  top:      25px;
  left:     -150px;
  z-index:  10;
}

.map-button {
    position:         absolute;
    transform:        translate(-50%, -50%); /* Zentriert den Button exakt auf dem Punkt */
    padding:          12px 12px;
    text-decoration:  none;
    z-index:          10; /* Stellt sicher, dass der Button über der Karte liegt */
}

.map-button:hover .hover-bild
{
display: block;
}

/* -------------------------------------------------------------------- */
.page-header /* nur wg. Joomla, unterdrueckt die Anzeige der Menuenamen */
  {
  display: none;
  }
/* -------------------------------------------------------------------- */

/* Ende der CSS-Datei */