/* === Foerstermühle – HTML5/CSS3 Styles === */

/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; }
body {
  background: #e4e4e4;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #666;
  margin: 0;
}
img { max-width: 100%; height: auto; border: none; }
a { color: #00c; }
p { margin: 0 0 0.9em; }
strong, b { font-weight: bold; }
a strong, a b { color: inherit; }
hr { border: none; border-top: 1px solid #aaa; margin: 14px auto; display: block; }
td { vertical-align: top; }

/* === Outer Layout (Flexbox) === */
.wrapper { max-width: 800px; margin: 0 auto; }
.layout  { display: flex; align-items: flex-start; }

/* === Content Column === */
.content-col  { flex: 1; min-width: 0; }
.content-area { max-width: 560px; padding: 16px; }

/* === Hauptnavigation (CSS :hover ersetzt JS-Rollover) === */
.main-nav { display: flex; justify-content: center; padding: 12px 0; }
.nav-btn  {
  display: inline-block;
  width: 70px;
  height: 70px;
  background-size: 70px 70px;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}
/* Hauptnav-Buttons in 180px breiten Zellen (Original: <td width="180">) */
.main-nav .nav-btn { width: 180px; }
.nav-galerie       { background-image: url('Bilder/Galerie.gif'); }
.nav-galerie:hover { background-image: url('Bilder/GaleriePressed.gif'); }
.nav-kontakt       { background-image: url('Bilder/Kontakt.gif'); }
.nav-kontakt:hover { background-image: url('Bilder/KontaktPressed.gif'); }
.nav-kanzlei       { background-image: url('Bilder/Kanzlei.gif'); }
.nav-kanzlei:hover { background-image: url('Bilder/KanzleiPressed.gif'); }
/* Home-Button: 50×50px GIF (nicht 70×70) */
.nav-home          { background-image: url('Bilder/Home.gif');
                     width: 50px; height: 50px; background-size: 50px 50px; }
.nav-home:hover    { background-image: url('Bilder/HomePressed.gif'); }

/* === Sidebar (aside) === */
.sidebar        { width: 192px; flex-shrink: 0; padding: 4px 0 0 4px; }
.sidebar-logo   { text-align: right; }
.sidebar-info   { text-align: right; font-size: 12px; line-height: 1.7; }
.sidebar-title  { font-size: 15px; font-weight: bold; margin-bottom: 4px; }
.sidebar-home   { text-align: right; margin: 8px 0; }
.sidebar-email  { text-align: right; font-size: 14px; margin-top: 6px; }
.sidebar-extra  { text-align: right; font-size: 12px; margin-top: 8px; }
.sidebar-footer {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-top: 10px;
  padding-right: 2px;
}

/* === Jahrestitel (AUSSTELLUNGEN 20xx) === */
.ausstellungen-titel { font-size: 1.8em; }
.ausstellungen-titel strong { color: #990000; }

/* === Typografie-Utilities (ersetzen deprecated align-Attribute) === */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }
.small       { font-size: 12px; }
.large       { font-size: 16px; }
p[align="justify"] { text-align: justify; }

/* === Bullet-Navigation (section-nav) === */
.section-nav {
  list-style: none;
  padding: 4px 8px;
  margin: 0 0 16px;
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 6px;
}
.section-nav li { padding: 2px 0; }
.section-nav li img { vertical-align: middle; margin-right: 3px; }

/* === 2-Spalten-Layout (text + bild) === */
.two-col { display: flex; gap: 16px; align-items: flex-start; }
.two-col .col-text { flex: 1; }
.two-col .col-img  { flex-shrink: 0; }

/* === Mobile (≤800px) === */
@media screen and (max-width: 800px) {
  .layout       { flex-direction: column; }
  .sidebar      { width: 100%; padding: 0; }
  .content-area { max-width: 100%; }

  .main-nav .nav-btn { width: auto; flex: 1; }

  .sidebar        { border-top: 1px solid #bbb; margin-top: 16px; padding-top: 12px; }
  .sidebar-logo   { display: none; }
  .sidebar-info,
  .sidebar-home,
  .sidebar-email,
  .sidebar-extra  { text-align: center; }
  .sidebar-info   { font-size: 13px; line-height: 1.6; }
  .sidebar-footer { justify-content: center; gap: 24px; }

  .two-col { flex-direction: column; }

  /* Verbleibende innere Tables responsiv */
  table, tbody, tr, td, th {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
  }
  td[align="center"] { text-align: center; }
  td[align="right"]  { text-align: right; }
}