/**
  @file SINGAPUR.CSS.PHP
  @version 2020-01, 2008-10, 2004-08
  @author (c) 2004-2020  Michael Ziemke, Koeln (Germany)
*/

* {
    /* Breite und Höhe aller HTML-Elemente einschl. Border und Padding ermittelt: */
    box-sizing: content-box;
  }

body {
  font: 16px Arial; /* Normierung 1.0em = 16px */
  background-image:url(./images/index_bg.gif);
  background-color:red;
  color:black;
  }
div { margin: 0.5em;  clear: both; }

a         { text-decoration: none; }
a:link    { color: #FFFF80; }
a:visited { color: #1aff1a; }
a:active  { color: #ffff00; }
a:hover   { color: #ccff33; font-weight: bold; }

h1,h2,h3 { margin-top: 0;  color: rgb(255,255,0); }
h1 { font-size: 1.3em; }
h2 { font-size: 1.2em; }
h3 { font-size: 1.1em; }

p              { color: rgb(0,0,0); margin: 0.2em; }
p.link         { margin: 0; cursor: pointer; }
p.link:hover   { color: #ccff33; font-weight: bold; } /* color:rgb(255,255,0); } */

.no-wrap { 
  white-space: nowrap;  /* verhindert Umbruch an Leerzeichen */ 
  }

/* 
  Checkbox-Hack zum Umschalten (un)sichtbar der Infos in Overview: 
  HTML dazu:
  <input type="checkbox" id="toggler">
  <label class="toggler" for="toggler">Infos anzeigen / verstecken</label>
  <p id="info" class="toggled">...</p>
*/
label.toggler:hover { cursor: pointer; color: rgb(255,255,0); }
input#toggler  { display: none; }
input[type=checkbox]:checked ~ .toggled {
	display: block;
}
.toggled { display: none; }

/* 
  Mobile first: Formate für kleine Displays bis 36em = 576px Breite:
  Content startet niedriger, da Titel noch zweizeilig ist; 
  Title und Content beginnen am linken Rand mangels Link-Spalte;
  Divs in Content-Section werden noch einspaltig dargestellt (flex / column)
  Content-Breite und -Höhe angepasst, vertikaler Scroll-Balken ermöglicht (overflow-y);
  Link-Spalte noch unsichtbar, um viel Platz für Content zu ermöglichen;
  Overview-Button ist sichtbar, um Seiten (mangels Links) über Overview-Seite abzurufen; 
  Bild-Formate: Bilder werden möglichst groß dargestellt
  - (ohne):   Bilder im Format 400px x 300px: auf 94% verfügbrer Breite
  - half:     Bilder im Format 266px x 300px: auf 96%, aber maximal 18em breit
  - original: Bilder in spez. Ausmaßen (schmal, niedriger): Höhe, Breite beibehalten
  - noch kein Umfluss von Text um schmale Bilder (left, right)
  
*/
div#links { display: none; }  
div#title { position: fixed; left: 0em; top: 0em; }  
div#content  { 
  position: absolute; 
  left: 0em; top: 10%; 
  max-width: 54em;
  height: 84%; 
  overflow-y: auto; 
  }  
 
button { border-radius: 0.3em; }
span#buttons {}

img {
  border-style: none;
  margin: 0.5em;
  width: 94%;  /* Bildskalierung, um hor. Scrollbar mögl. zu vermeiden */
  max-width: 25em;
  }
img.original { width: auto; height: auto; max-width: 95%; }  
  
section { 
  display: flex;  /* ist ein Flex-Container */
  flex-direction: column;  /* vertikale Anordnung der Flex-Items */
  }  
.half { width: 96%; max-width: 18em; }
.left, .right { display: block; }

@media all and (min-width: 36em) {
  /* Spalte Links nun sichtbar, Abstände Title und Content anpassen: */
  body { overflow-y: hidden; } /* verhindert zweite scrollbar rechts */ 
  span#buttons { display: none; }
  div#links { display: block; width: 6em; height: 95%; position: fixed; overflow-y: auto; }  
  div#title { left: 7em;}  
  div#content  { top: 6%; left: 7em; height: 90%;} /* höher, da Titel nun einzeilig */ 
  /* Bildbreite-Formate bei noch vertikaler Flex-Darstellung: */
  img { width: 100%; height: 100%; } /* nun keine Bildskalierung mehr */
  .half, .original { max-height: 18.75em; width: max-content; } /* noch variabel, aber max. Höhe 300px = 18.75em */

  /* nun Umfliessen des Textes um halbe Bilder: */
  .left { float: left; }
  .right { float: right; }
}

@media all and (min-width: 62em) {
  /* ab jetzt horizontale Flex-Darstellung innerhalb Section: */
  div { width: 25em; height: max-content; } /* horizontal halbe Section */
  section { 
    flex-direction: row;  /* horizontale Anordnung der Flex-Items */
    max-width: 52em;
    }
  .half { max-width: 14em; } /* nun feste Maximal-Breite 225px = 14em */

  /* Zentrierung von Links, Title und Content (nicht mittels margin: 1em auto; !): */
  div#links   { margin-left: calc(50% - 34em + 0.5em); transform: translateX(+50%); }
  div#title   { width: 54em; left: calc(50% - 51em); transform: translateX(+50%); }  
  div#content { width: 54em; left: calc(50% - 51em); transform: translateX(+50%); }  
  }  

@media print {
  /* Standardisierungen nur für die Druckausgabe auf DIN-A4 Portrait: */
  div         { width: 50%; }
  div#links   { display: none; }
  div#title   { width: 100%; margin-left: 0; position: static; } /* Titel nur auf erster Seite */  
  div#content { width: 100%; margin-left: 0; top: 1.5em; overflow-y: unset; } /* auch Folgeseiten */ 
  section     { flex-direction: row; break-before: auto; } /* ggf. trennen vor nächster Section */ 
  h1,h2,h3    { margin-top: 0; color: black; } /* keine farbigen Titel */
  img         { max-width: 48%; } 
  .half       { width: 50%; }
}