/*ALLGEMEIN*/


/*Alle Links bleiben schwarz und werden nicht unterstrichen.*/

a {
  color: #000000;
  text-decoration: none;
}

/*Die margins von body sind gleich dem Anderthalbfachen der verwendeten Schriftgröße.*/
/*Schriftart Helvetiva wird für alle body-Elemente festgelegt.*/

body {
  margin: 1.5em;
  font-family: "Helvetica Neue", sans-serif;
}

/*kein Rechtsklick auf Bildern*/

img {
 pointer-events: none;
}

/*Textformate*/

.linksbuendig {
    text-align: left;
}

.rechtsbuendig {
    text-align: right;
}

.mittig {
    text-align: center;
}

.blocksatz {
    text-align: justify;
}

/*Orientation-Bug von iOS umgehen*/

html {
  -webkit-text-size-adjust: 100%;
}


/*STARTSEITE*/


/*Der Inhalt der Startseite wird horizontal und vertikal zentriert.*/

.wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;   /* so breit wie der Inhalt, nicht nur halber Bildschirm */
  max-width: 90vw;      /* auf sehr schmalen Geräten trotzdem noch Rand */
}


/*FLEXBOX*/


/*Container bekommt eine Maximalgröße von 46em und wird horizontal zentriert.*/

.container {
  max-width: 46em;
  margin-right: auto;
  margin-left: auto;
}

/*Wenn der Bildschirm mindestens 640px breit ist, werden die Elemente mit der Klasse .layout zu Flex-Containern.*/ 
/*Der sie umgebende Container wird horizontal und vertikal zentriert.*/

@media (min-width: 640px) {
  .layout {
    display: flex;
  }
  .container {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

/*Die Elemente in den Columns passen ihre Größe an den verfügbaren Platz an.*/

.col-main {
  flex: 1;
}

.col-complementary {
  flex: 1;
}

/*Das Padding in den Columns ist gleich der verwendeten Schriftgröße.*/

.col {
  padding: 1em;
}


/*EINFACHE GALLERIE*/


/*Der Footer der Gallerie wird am unteren Ende der Seite fixiert.*/

.galleryFooter {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    background: #fff;   /* weißer Hintergrund, Galerie verschwindet dahinter */
    z-index: 100;       /* liegt immer über der Galerie */
  }

/*Der Header der Gallerie wird am oberen Ende der Seite fixiert.*/

.galleryHeader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 1.5em;     /* gleicher Abstand wie bisher durch den body-Rand */
    background: #fff;   /* weißer Hintergrund, Galerie verschwindet dahinter */
    z-index: 100;       /* liegt immer über der Galerie */
  }

/*Ab einer Bildschirmgröße von 940px rücken die Textelemente vom Seitenrand weg.*/

@media (max-width: 939px) {
  .galleryFooter {
    padding: 1em 1.5em; /* genug Platz rechts und links */
  }
}

@media (min-width: 940px) {
  .galleryHeader {
  padding: 2em 8em 2em; /* unten 1em statt 0.5em: weißer Hintergrund reicht weiter nach unten */
  }
  .galleryFooter {
  padding: 2em 8em 2em; /* genug Platz rechts und links */
  }
}

/*Die Gallerie wird mittig auf der Seite zentriert.*/

.gallery {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*Die Bilder skalieren sich zu maximal 80% der Website-Breite und 70% der Website-Höhe.*/

.gallery img {
  height: auto; 
  width: auto; 
  max-width: 80vw; 
  max-height: 70vh; 
}


/*PORTFOLIO-GALLERIE*/


  .pg {
    --pg-gap: 4px;            /* Abstand zwischen den Bildern */
    --pg-radius: 0px;         /* Eckenrundung, z. B. 6px */
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: dense;    /* andere Bilder rücken in freie Lücken */
    gap: var(--pg-gap);
  }
  .pg details {
    margin: 0;
    min-width: 0;
  }
  .pg summary {
    display: block;
    list-style: none;
    aspect-ratio: 1 / 1;      /* quadratischer Ausschnitt */
    overflow: hidden;
    border-radius: var(--pg-radius);
    background: #ddd;
    cursor: zoom-in;
  }
  .pg summary::-webkit-details-marker { display: none; }
  .pg summary img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter .25s;
  }
  .pg summary:hover img { filter: brightness(.92); }
  .pg summary:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }

  /* Geöffnetes Bild: volle Breite, Original-Seitenverhältnis */
  .pg details[open] { grid-column: 1 / -1; }
  .pg details[open] summary {
    aspect-ratio: auto;
    cursor: zoom-out;
  }
  .pg details[open] summary img {
    height: auto;
    animation: pg-open .45s cubic-bezier(.22,.8,.24,1);
  }
  .pg details[open] summary:hover img { filter: none; }

  @keyframes pg-open {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pg details[open] summary img { animation: none; }
  }


 /* Größe und Position der Galerie */
  .pg {
    --pg-w: max(50vw, 600px);   /* Breite auf dem Desktop */
    --pg-rows: 3;               /* Anzahl der Bildreihen */
    box-sizing: border-box;
    width: var(--pg-w);
    max-width: none;
    margin-left: calc(50% - var(--pg-w) / 2);
    margin-right: 0;
    /* gleicher Abstand oben und unten -> vertikal mittig */
    margin-top: max(5em, calc((85svh - var(--pg-w) * var(--pg-rows) / 3) / 2)); 
    margin-bottom: max(16px, calc((100svh - var(--pg-w) * var(--pg-rows) / 3) / 2));
  }

   /* Handy: volle Bildschirmbreite, direkt unter dem Header statt zentriert */
  @media (max-width: 768px) {
    .pg {
      --pg-w: 100vw;
      margin-top: 4.5em;     /* direkt unter dem Header */
      margin-bottom: 4em;    /* Platz für den Footer */
      padding: var(--pg-gap);
      background: #fff;
    }
  }

  /* Sehr schmal: Menü steht in zweiter Zeile, Header ist höher */
  @media (max-width: 439px) {
    .pg {
      margin-top: 6em;
    }
  }
  


/* Galleriemenü rechtsbündig*/
.galleryMenu {
  float: right;
}
/* Handy: Menü linksbündig unter dem Namen */
@media (max-width: 439px) {
  .galleryMenu {
    float: none;
    display: block;
    margin-top: 6px;
  }
}
/* Geöffnetes Bild passt immer zwischen Header und Footer */
.pg details[open] summary {
  background: transparent;   /* kein grauer Rand neben schmalen Bildern */
}
.pg details[open] summary img {
  max-height: min(calc(100svh - 12em), 75svh);
  object-fit: contain;
}

@media (max-width: 939px) {
  .pg details[open] summary img {
    max-height: min(calc(100svh - 9em), 75svh);
  }
}

/*Logo auf der Startseite: mittig, auf dem Desktop 200px breit*/

.logo {
  display: block;
  width: 200px;
  max-width: 60vw;      /* schrumpft auf schmalen Bildschirmen mit */
  height: auto;
  margin: 0 auto 2em;   /* mittig, Abstand nach unten statt <br><br> */
}