/* ============================================================
   thielART - Nachbesserungen 2026
   Version: v2 - 2026-08-30

   Die Seite von 2009 arbeitete mit fester Breite und absoluter
   Positionierung: der Inhalt 800px starr, die Leiste unten
   festgenagelt, die Navigation darin bei margin-left:380px.
   Auf schmalen Fenstern ging das nicht auf.

   Wird nach den alten Stylesheets geladen und ueberschreibt sie.
   ============================================================ */

body {
  background-image: none !important;
  background: #ffffff !important;
}

/* ---------- Kopfleiste: bleibt beim Scrollen stehen ---------- */
div#footer {
  position: sticky !important;
  top: 0;
  width: auto !important;
  height: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  background: #ececea !important;
  border-bottom: 1px solid #d5d2c8;
  margin: 0 0 30px;
  padding: 0;
  z-index: 100 !important;
}
body > div#footer { position: sticky !important; }

/* Inhalt der Leiste mittig, gleiche Breite wie der Seiteninhalt */
div#footer {
  display: block;
}
div#footer::after { content: ""; display: table; clear: both; }

/* Die alten absoluten Positionen und festen Maße neutralisieren.
   Der zentrierende Rahmen .kopf-innen ist ausgenommen - sonst wuerde
   "margin: 0 !important" seine auto-Raender und damit die Zentrierung
   wieder aushebeln. */
div#footer > div:not(.kopf-innen),
div#rainer, div#navi, div#graph {
  position: static !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  z-index: auto !important;
}
div#footer .kopf-innen {
  position: static !important;
  height: auto !important;
  z-index: auto !important;
}

/* Der graue Balken laeuft ueber die volle Breite, sein Inhalt sitzt
   auf derselben Mitte wie Seiteninhalt und Fusszeile. */
div#footer { display: block; padding: 0 26px; }

div#footer .kopf-innen {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 26px;
  padding: 10px 0;
}

div#rainer  { order: 1; flex: 0 0 auto; }
div#navi    { order: 2; flex: 1 1 auto; }
div#graph   { order: 3; flex: 0 0 auto; margin-left: auto !important; }

div#graph img  { display: block; height: auto; max-width: 100%; max-height: 40px; width: auto; }
/* Das Portraet bleibt in Originalgroesse (263x273), ausdruecklich
   ungeskaliert. Nur auf sehr schmalen Schirmen wird es begrenzt,
   sonst passt es dort nicht neben die Navigation. */
div#rainer img { display: block; width: auto; height: auto; max-width: 100%; }

/* ---------- Navigation ---------- */
.mod_navigation {
  position: static !important;
  text-align: left !important;
  right: auto !important;
}
.mod_navigation ul { width: auto !important; display: flex; flex-wrap: wrap; gap: 4px 26px; }
.mod_navigation li { float: none !important; padding-left: 0 !important; margin: 0 !important; }

/* Gleiches Padding fuer Link UND aktiven span - sonst sitzt der
   aktive Eintrag einen Pixel tiefer als seine Nachbarn. */
.mod_navigation a,
.mod_navigation span {
  display: inline-block !important;
  padding: 6px 2px !important;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .04em;
  text-decoration: none;
  font-weight: 400 !important;      /* kein bold: das aendert die Breite */
  vertical-align: baseline;
}
.mod_navigation a:hover { text-decoration: underline; }

/* Aktiv wird ueber Farbe und Unterstrich markiert, nicht ueber
   Fettschrift - so springt beim Seitenwechsel nichts. */
.mod_navigation .active,
.mod_navigation span.active,
.mod_navigation a.trail {
  color: #2f4a16 !important;
  box-shadow: inset 0 -2px 0 #6f9440;
}

/* ---------- Inhalt ---------- */
/* main.css setzt hier display:inline und laesst den Container schmaler
   werden als das Fenster - dann kann sich der Inhalt nicht zentrieren. */
div#container {
  background: #ffffff !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
}

div#content {
  width: auto !important;
  max-width: 900px;
  margin: 0 auto !important;
  padding: 0 26px 70px !important;
  overflow: visible !important;
}

/* Bildergalerie: Tabelle bricht auf schmalen Schirmen um */
#content table[summary="Image gallery"],
#content table[summary="Image gallery"] tbody,
#content table[summary="Image gallery"] tr {
  display: block !important;
  width: auto !important;
}
#content table[summary="Image gallery"] tr {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
}
#content table[summary="Image gallery"] td {
  display: block !important;
  width: auto !important;
  padding: 0 !important;
}
#content .image_container { margin: 0 !important; }
#content img { max-width: 100%; height: auto; }

/* ---------- Fusszeile ---------- */
div#seitenfuss {
  border-top: 1px solid #d5d2c8;
  background: #f4f3f0;
  margin-top: 40px;
  padding: 16px 26px;
}
div#seitenfuss .fuss-innen {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  align-items: baseline;
  font-size: 11.5px;
  color: #5c5f57;
}
div#seitenfuss a { color: #4a5340; text-decoration: none; }
div#seitenfuss a:hover { text-decoration: underline; }
div#seitenfuss .fuss-innen a + a::before {
  content: "\00b7";
  color: #a8aa9e;
  margin-right: 20px;
}

@media (max-width: 700px) {
  div#footer { padding: 0 16px; }
  div#footer .kopf-innen { gap: 10px 18px; padding: 8px 0; }
  div#rainer img { max-height: 150px; }   /* nur auf dem Telefon begrenzt */
  div#graph { display: none; }
  div#content { padding: 0 16px 50px !important; }
  div#seitenfuss { padding: 14px 16px; }
  .mod_navigation ul { gap: 4px 18px; }
  .mod_navigation a, .mod_navigation span { font-size: 14px; }
}