/* ================================
   style.css — klassisch & mobil (bereinigt)
   - alter Look (kleine Typo)
   - Float-Layout (Desktop), stacked (Mobile)
   - Navigation immer sichtbar
   - Galerie bis 1200px Bildbreite
   ================================ */

/* ---------- Base & Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { 
  scroll-behavior: smooth; 
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  margin: 0;
  color: #000;
  background: #fff;
  background-image: url("./images/bgi.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed; /* wie früher */
  background-position: center top;
  background-size: cover;
  font-family: Verdana, Tahoma, "Lucida Sans Unicode", "Lucida Grande",
               "Bitstream Vera Sans", Arial, sans-serif;
  line-height: 1.6;
}

/* ---------- Wrapper ---------- */
#wrapper {
  max-width: 1200px;     /* von 1102px auf 1200px erhöht */
  width: 100%;
  margin: 0 auto;
  color: #000;
  background: #fff;
  font-size: 0.8125rem;
  line-height: 20px;     /* alter Look */
  padding: 30px 10px 10px;
  overflow: visible;
  text-align: left;
}

/* Falls im HTML .main-grid vorhanden ist: neutralisieren & clearfix */
.main-grid { display: block; }
.main-grid::after {
  content: "";
  display: block;
  clear: both;
}

/* ---------- Header ---------- */
#header { text-align: center; color: #d6d6d6; margin-bottom: 8px; }

/* Name/Logo-Link (klassisch) */
.logo, .site-name, #header .logo {
  text-decoration: none;
  color: inherit;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 12px; /* dezent, passend zur Seite */
}

/* ---------- Navigation (immer sichtbar) ---------- */
.main-nav {
  display: flex;                 /* immer sichtbar */
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: .5rem;
}

/* Link-Container (zentriert, Umbruch erlaubt) */
#navi, #navi2 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 10px;
  gap: 10px;
}

/* Links */
#navi a, #navi2 a, #inhalt a, #galerie a {
  display: inline-block;
  padding: .25rem .5rem;
  text-decoration: none;
  color: #000;
  line-height: 1.2;
  border-bottom: 0;
  font-size: 0.8125rem;
}

#navi a:hover, #navi2 a:hover, #inhalt a:hover, #galerie a:hover {
  border-bottom: 1px dotted #777;
  text-decoration: none;
}

#navi .active, #navi2 .active,
#navi a[aria-current="page"], #navi2 a[aria-current="page"] {
  border-bottom: 1px dotted #777;
}

/* ---------- Typografie ---------- */
h1, h2 {
  color: #000;
  font-weight: normal;
  letter-spacing: 1px;
  line-height: 29px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 8px;
}

h1 { font-size: 12px; }   /* alter Look */
h2 {
  font-size: 10px;        /* alter Look */
  border-top: 1px dashed #e5e5e5;
  padding-top: 6px;
}

/* ---------- Inhalt / Spalten (klassisch) ---------- */
.textover {
  width: 350px;
  max-width: 100%;
  margin: 30px;
  padding: 10px;
  font-size: 11px;
  text-align: justify;
  color: #000;
}

/* linke Spalte */
#leftcolumn {
  float: left;
  overflow: hidden;
  width: 350px;
  height: auto;
  margin: 60px;
  padding: 10px;
  text-align: justify;
  color: #000;
}

/* rechte Spalte */
#rightcolumn {
  float: right;
  width: 560px;           /* klassische Breite beibehalten */
  height: auto;
  margin-top: 30px;
  margin-right: 30px;
  padding: 30px;
  color: #000;
}

/* Kleine Content-Box */
.kol {
  width: 220px;
  height: auto;
  background-color: #f8f8f8;
  padding: 16px;
  text-align: justify;
}

/* Zwei Kacheln links/rechts (klassisch) */
#left, #right {
  width: 400px;
  height: auto;
  padding: 15px;
  font-size: 11px;
  color: #000;
  text-align: center;
  background-color: #efefef;
}
#left  { float: left;  margin: 30px 30px 30px 90px; }
#right { float: right; margin: 30px 90px 30px 30px; }

/* ---------- Galerie (klassisch, bis 1200px) ---------- */
#galerie {
  display: block;
  text-align: center;          /* statt justify → zentriert jede Zeile */
  font-size: 0;                /* Whitespace zwischen inline-blocks entfernen */
  max-width: 1200px;           /* max. Bildbreite */
  margin: 0 auto;              /* zentrieren des Containers */
  padding: 0 12px;             /* dezente Gutter links/rechts */
}
#galerie::after {
  content: none;               /* Hilfselement vom Justify-Trick ausschalten */
}
#galerie img {
  display: inline-block;       /* nebeneinander, solange Platz ist */
  margin: 10px 6px;            /* kleiner horizontaler Abstand */
  width: auto;                 /* nicht strecken */
  max-width: 100%;             /* responsiv schrumpfen, falls nötig */
  height: auto;
  vertical-align: top;
  border: 1px solid #000;      /* wie bisher – ggf. entfernen, wenn nicht gewünscht */
  float: none;                 /* falls irgendwo Float gesetzt war */
}
/* ---------- Barrierefreiheit ---------- */
a:focus-visible, button:focus-visible {
  outline: 2px dashed #777;
  outline-offset: 2px;
}

/* ---------- Responsive (korrigiert) ---------- */

/* Desktop / große Screens: Gutter in der Galerie,
   max. Bildbreite 1200px minus Padding, Galerie zentriert */
@media (min-width: 900px) {
  #galerie {
    padding-left: 12px;
    padding-right: 12px;
    max-width: calc(1200px - 24px);  /* 1200 - 2*12 */
    margin-left: auto;
    margin-right: auto;
  }
}

/* Tablet & kleiner: Spalten stapeln, Bilder in Spalten anpassen,
   Hintergrund nicht fixed (Performance) */
@media (max-width: 900px) {
  #leftcolumn,
  #rightcolumn,
  #left,
  #right {
    float: none;
    width: 100%;
    margin: 16px 0;
    padding: 16px;
  }

  .textover { margin: 16px 0; }

  /* Bilder in den Spalten auf Gerätebreite bringen */
  #leftcolumn img,
  #rightcolumn img {
    display: block;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }

  body { background-attachment: scroll; }
}

/* Handy / sehr schmal: Hochformate untereinander, aber zentriert.
   Dazu den Justify-Trick deaktivieren. */
@media (max-width: 640px) {
  #galerie {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
  }
  #galerie::after {
    content: none;
    display: none;
  }
  #galerie img {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
  }
}



/* Falls Bilder feste HTML-Attribute width/height haben, neutralisieren */
img[width]  { width: auto; max-width: 100%; }
img[height] { height: auto; }

/* ===== Columns responsive ===== */

/* ================================
   Responsive Layout für Columns
   ================================ */

/* Tablet & kleiner — Spalten stapeln */
@media (max-width: 1080px) {
  #leftcolumn,
  #rightcolumn,
  #left,
  #right {
    float: none;            /* Floats deaktivieren */
    width: 100%;            /* volle Breite */
    max-width: 100%;
    margin: 16px 0;
    padding: 16px;
    text-align: left;       /* rechtsbündiges "Kleben" verhindern */
  }

  /* Bilder innerhalb der Spalten skalieren sauber mit */
  #leftcolumn img,
  #rightcolumn img,
  #left img,
  #right img {
    display: block;
    max-width: 100%;
    width: 100%;            /* falls alte width-Attribute existieren */
    height: auto;
  }

  /* Hintergrund auf Mobil nicht fixed (Performance) */
  body { background-attachment: scroll; }
}

/* Handy — etwas kompaktere Typo und Abstände */
@media (max-width: 560px) {
  #leftcolumn,
  #rightcolumn {
    padding: 14px;
  }

  h1 { font-size: 11px; line-height: 1.6; }
  h2 { font-size: 9.5px; line-height: 1.6; }
}

/* Clearfix, falls Floats aktiv sind (z. B. Desktop) */
.main-grid::after {
  content: "";
  display: block;
  clear: both;
}