/* =========================
   ROOT / VARIABLEN
   ========================= */
:root {
  /* Farben */
  --farbe-hintergrund: #fff;
  --farbe-text: #000;
  --farbe-accent: #d735ff;
  --farbe-hover: #fcc727;
  --farbe-nav-hover: rgba(0, 0, 0, 0.05);

  /* Abstände */
  --abstand-vw: 10vw;
  --abstand-s: 3px;
  --abstand-m: 10px;
  --abstand-l: 40px;

  /* Border Radius */
  --radius-bilder: 5px;

  /* Typografie */
  --textgroesse-hero: clamp(70px, 10vw, 100px);
  --textgroesse-h2: 1.8em;
  --textgroesse-p: 1em;

  /* Galerie */
  --galerie-gap: 0.5rem;
  --galerie-bild-hoch: 20vw;

  /* Nav */
  --nav-gap: 10px;
  --nav-padding: 0.5em 0.75em;
}

/* =========================
   RESET / BASIS
   ========================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  background-color: var(--farbe-hintergrund);
  color: var(--farbe-text);
}

/* =========================
   TYPOGRAFIE
   ========================= */

h1 {
  font-weight: 500;
  font-size: var(--textgroesse-hero);
  color: var(--farbe-accent);
}

h2 {
  font-size: var(--textgroesse-h2);
  margin: 0 var(--abstand-vw) var(--abstand-s) var(--abstand-vw);
}

p {
  text-align: justify;
  hyphens: auto;
  font-size: var(--textgroesse-p);
  margin: var(--abstand-m);
}

article {
    margin: 0 var(--abstand-vw) var(--abstand-l) var(--abstand-vw);
}




/* =========================
   MEDIEN
   ========================= */

img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-bilder);
  display: block;
}

.video {
  max-width: 80%;
  margin-left: var(--abstand-vw);
  margin-right: var(--abstand-vw);
  border-radius: var(--radius-bilder);
  
}

figure {
  display: flex;
  align-items: last baseline;
  max-width: 100%;
  gap: 0 var(--abstand-m);
  margin-bottom: var(--abstand-m);
}

/* =========================
   HEADER / NAVIGATION
   ========================= */

header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.8);
  padding: var(--abstand-s) var(--abstand-m);
}

nav {
  margin: var(--abstand-s) 0 var(--abstand-s) 0;
  font-weight: bold;
}

nav ul {
  display: flex;
  gap: var(--nav-gap);
  list-style: none;
  margin-top: -20px;
}

nav a {
  display: block;
  padding: var(--nav-padding);
}

/* =========================
   LINKS (global)
   ========================= */

a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.24s ease,
    color 0.05s ease,
    background-color 0.15s ease;
}

a:hover,
a:focus,
a:active {
  color: var(--farbe-hover);
  transform: scale(1.05);
}

nav a:hover {
  background-color: var(--farbe-nav-hover);
}

/* =========================
   GALERIE
   ========================= */

.galerie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-m);
  justify-content: flex-start;
}

.galerie figure {
  margin: 0;
  display: inline;
}

.galerie img{
  height: var(--galerie-bild-hoch);
  width: auto;
}

/* =========================
   PROJEKTE-SEITE
   ========================= */

.projekte-page figure {
  color: rgb(255, 254, 254);
  margin: 0 0 var(--abstand-l) 0;
}

.projekte-page figcaption {
  text-align: end;
  font-size: 1.2em;
  text-transform: lowercase;
  font-weight: 900;
  margin-top: -35px;
  margin-right: 10px;
}

.flex {
display: flex;
gap: var(--abstand-m);
}

.index-page 
/* =========================
   HERO
   ========================= */

.hero {
  width: 100%;
}

.hero figcaption {
  width: 80%;
}

/* =========================
   CONTENT-HOVER (SPEZIALFALL)
   ========================= */

.content a:hover {
  transform: scale(1.04);
}