/* TREND – ein Stylesheet für alle Seiten */

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: light; background: #fff; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

/* Raster: Kopf, Inhalt, untere Zeile – der Fuß liegt unterhalb des Bildschirms */
body {
  display: grid;
  grid-template-rows: 10vh 80vh 10vh auto;
  font-family: sans-serif;
  text-align: center;
}
header { padding-top: calc(1rem - 0.5vh); position: relative; z-index: 2; } /* Logo liegt vor den fliegenden Bildern */
header a { display: inline-block; }
header img { height: 7vh; }
main, nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1vh;
}
main { padding-bottom: 5vh; }
main img { max-height: 75vh; }
nav { gap: max(1vh, 4vh / 3 - 2px); } /* wie die alte Seite: ab ca. 800 px Fensterhöhe etwas weiter */
nav img { max-height: 11vh; }
/* Listen und Kontakt: Schrift zwischen „i“ (5vh) und Menü (11vh), Abstand im selben Verhältnis */
.liste, .info { gap: calc(max(1vh, 4vh / 3 - 2px) * 8 / 11); }
.liste img, .info img { max-height: 8vh; }
.info { padding-bottom: 0; }
/* Abstand der unteren Zeile zum Rand, wie auf der alten Seite fast fest */
:root { --unten: calc(2vh / 3 + 30.3px); }
.unten { align-self: end; padding-bottom: var(--unten); }
.unten img { height: 5vh; margin: auto; }
footer { grid-row: 4; }

/* Textbilder einer Gruppe erscheinen gemeinsam, wenn alle geladen sind (site.js setzt .da);
   ohne Skript spätestens nach 2 s */
header, nav, .info, .unten { visibility: hidden; animation: zeigen 0s 2s forwards; }
header.da, nav.da, .info.da, .unten.da { visibility: visible; }
@keyframes zeigen { to { visibility: visible; } }

/* Schwarz wird beim Überfahren rot */
.rot { display: none; }
@media (hover: hover) {
  a:has(.rot):hover > img:not(.rot) { display: none; }
  a:hover > .rot { display: block; }
}

/* Projektbilder: linke und rechte Hälfte blättern, der Pfeil erscheint beim Überfahren */
.galerie { position: relative; }
.galerie figure { height: 100%; display: grid; place-items: center; }
.galerie figcaption { position: absolute; inset: calc(100% + 5vh - var(--unten)) 0 auto; } /* auf Höhe des „i“ */
.galerie figcaption img { height: 5vh; margin: auto; }
/* Pfeile so weit vom Seitenrand wie die Schrift der Unterschrift vom unteren Rand
   (unter der Schrift sind 24,4 % des 5vh hohen Bilds leer = 1,22vh) */
.galerie button { position: absolute; top: 0; width: 50%; height: 100%; padding: 0 calc(var(--unten) + 1.22vh); font-size: 1.5rem; color: transparent; }
@media (hover: hover) { .galerie button:hover { color: inherit; } }
.zurueck { left: 0; text-align: left; }
.weiter { right: 0; text-align: right; }
/* Pfeile als gefüllte gleichschenklige Dreiecke */
.galerie button::before { content: ""; display: inline-block; width: 0.9em; height: 1.2em; background: currentColor; }
.zurueck::before { clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.weiter::before { clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* Fliegende Bilder: site.js setzt Position und macht sie sichtbar.
   Alle ausschalten: die nächste Zeile mit .flieger { display: none; } aktivieren. */
/* .flieger { display: none !important; } */
.flieger { position: fixed; top: 0; left: 0; z-index: 1; display: grid; place-items: center; perspective: 1500px; pointer-events: none; visibility: hidden; }
.flieger img { grid-area: 1 / 1; width: 100%; backface-visibility: hidden; transition: transform 0.8s; }

/* Karte: Außenraum vorn, Innenraum hinten, ein Klick dreht sie um */
.dreh { pointer-events: auto; cursor: pointer; }
.dreh img:last-child { transform: rotateY(180deg); }
.gedreht img:first-child { transform: rotateY(-180deg); }
.gedreht img:last-child { transform: none; }

/* Startseite: das GIF wird von links nach rechts aufgedeckt */
.intro { grid-template-rows: 100vh; place-items: center; background: #000; }
.intro::after {
  content: "";
  position: fixed;
  inset: 0 0 0 auto;
  width: 100%;
  background: #000;
  animation: aufdecken 5s forwards;
}
@keyframes aufdecken { to { width: 0; } }

@media (max-width: 600px) {
  .menue { overflow: hidden; }
  .menue img { height: 6rem; max-width: none; }
  main { padding-bottom: 0; }
  .galerie figcaption { top: calc(100% - 2vh); }
}