/* DATEI: ah_reaponsive.css    - Stand 06.04.2025 A.Helfer*/

body { margin-top:10px; margin-bottom:10px; }

/* Elementposition
Mit Hilfe von margin (Abstand eines Elementes von einem anderen Element) und
padding (Abstand des Inhaltes innerhalb eines Elements von dem Elementrand) kann in CSS die Position eines Elementes festgelegt werden.
Beispiel - Abstand eines Elementes von einem anderen Element
  margin: Laegenangabe | Prozentwert | auto
Beispiel - Abstand des Inhaltes innerhalb eines Elements von dem Elementrand
  padding: Laegenangabe | Prozentwert | auto
Bei padding und margin koennen die Abstaende von dem oberen, rechten, unteren und/oder linken Rand definiert werden. Zusaetzlich koennen die Abstaende nach oben, rechts, unten und links ueber das direkte Ansprechen der Position definiert werden: 
padding/margin-top,  padding/margin-right, padding/margin-bottom, padding/margin-left
Hierbei sind sowohl positive als auch negative Werte moeglich. */

/* text-align: justify; = Blocksatz */

p,h1,h2,h3,h4,ul,ol,li,div,td,th,address,blockquote,nobr,b,i ,a,href     { font-family:"Trebuchet MS",Verdana,Arial,Helvetica,sans-serif; }

h1 { font-size:20px; font-weight:lighter; margin-top:20px;margin-bottom:3px; color:#707070}
h2 { font-size:13px; font-weight:bold; margin-top:18px;margin-bottom:3px}
h3 { font-size:12px; font-weight:bold; margin-top:15px;margin-bottom:3px}
h4 { font-size:11px; font-weight:bold; margin-top:15px;margin-bottom:3px}
h5 { font-size:13px; font-weight:bold; margin-top:18px;margin-bottom:3px; color:#FFFFFF}

p,ul,ol,li,div,th,address,nobr,b,i { color:#606060;font-size:14px;line-height:140%; }
td  { color:#606060;font-size:12px;line-height:140%; }

p.hinweis {font-style: italic;}

/* a,href { font-size:11px;}
pre,tt { font-family:Courier New,Courier; font-size:10px; color:#0000C0; } /* #0000C0 = blau */
td.xmpcode { border-width:1px; border-style:solid; border-color:#999999; background-color:#FFFFE0; }

td.breit { width:400px; }
td.breiter { width:600px; }

footer { font:small sans-serif}

/* Bereiche mit Beispiel-Quelltexten */
/* border-width = Randbreite,  border-style = Randstil */

.code { background-color:#FFFFE0; }
/* Tabelleninhalte mit Quellcode */
/* #FFFFE0 = helles Gelb,  */
/* Farbe sollte gleich sein wie bei td.xmpcode */

td.xplcode { background-color:#EEEEFF; }
/* Tabelleninhalte mit Erklaerungen */
/* background-color = Hintergrundfarbe */
/* #EEEEFF = helles Blau,  */

.doc { background-color:#EEEEEE; }
/* Layout-Elemente mit hellgrauem Hintergrund */
/* background-color = Hintergrundfarbe */
/* #EEEEEE = helles Grau,  */

.qbar { background-color:#FFFFE0; font-size:9pt; font-family:Arial,sans-serif; }
/* Layout-Elemente mit hellgrauem Hintergrund */
/* nur MS IE 4, Netscape 4.0 ignoriert diese Angaben */
/* background-color = Hintergrundfarbe */
/* #FFFFE0 = helles Gelb,  */

pre.normal { color:#000000; }
/* normale praeformatierte Bereiche, nicht fuer Quelltexte */
/* #000000 = schwarz */

a:link { color:#606060; text-decoration:none; }
a:visited { color:#808080; text-decoration:none; }
a:active { color:red; text-decoration:none; font-weight:bold; }
a:hover { color:red; text-decoration:none; font-weight:bold; }

/* wird nicht in Safari angezeigt */
/* a:link = Verweise zu noch nicht besuchten Seiten */
/* a:visited = Verweise zu bereits besuchten Seiten */
/* a:active = Verweise, die gerade angeklickt werden */
/* #AA5522 = beige */
/* #772200 = braun */
/* #000000 = schwarz */
/* text-decoration = Tesxtstil */
/* underline = unterstrichen, Default-Wert */
/* none = nicht unterstrichen */

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }



/* ===========================
   Responsive Anpassungen
   =========================== */

/* Standard: alle Boxen maximal 100% Breite */
td.breit,
td.breiter {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px;
}

/* Bilder automatisch skalieren */
img {
  max-width: 100%;
  height: auto;
}

/* Textbereiche und Container */
#outerImageContainer,
#imageDataContainer {
  width: 100%;
  max-width: 100%;
}

/* Schriftgroessen anpassen */
body, p, ul, ol, li {
  font-size: 1rem;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; }

/* For Tablets (ab 768px) */

@media (max-width: 768px) {
  body {
    padding: 10px;
  }

  .qbar {
    font-size: 0.8rem;
  }
}

@media (max-width: 768px) {
      .about-container {
        flex-direction: column;
      }

      .about-image {
        height: auto;
        padding: 20px;
      }

      .about-image img {
        width: 100%;
        height: auto;
      }
    }



/* For Smartphones (ab 480px) */
@media (max-width: 480px) {
  h1 { font-size: 1.2rem; }
  h2 { font-size: 1rem; }
  h3, h4 { font-size: 0.9rem; }

  #imageData #imageDetails {
    width: 100%;
    float: none;
  }

  #bottomNavClose {
    width: 100%;
    float: none;
    text-align: center;
  }
}

.content-area {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.side-area {
  width: 100%;
  max-width: 150px;
  margin: 0 auto;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.about-container {
  display: grid;
  grid-template-columns: 1fr 1fr; 
  grid-gap: 1em;
  flex-wrap: wrap;
  background: #fff;
  max-width: 1000px;
  margin: auto;
  box-shadow: 0 0 0px rgba(0,0,0,0.1);
  border-radius: 10px;
  overflow: hidden;
}

.about-text {
  flex: 1 1 60%;
  padding: 30px;
}

.about-text h1 {
  margin-top: 0;
}

.about-image {
  flex: 1 1 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-image img {
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 600px;
  object-fit: cover;
}