/* CSS bestimmt, wie die Seite aussieht.
   Aufbau immer:  WAS { EIGENSCHAFT: WERT; } */

/* Farben und Schrift an EINER Stelle festlegen ("Variablen").
   Wenn du die Farbe ändern willst, nur hier ändern. */
:root {
  --hintergrund: #3a3a3a;   /* dunkles Grau wie bei der Kunsthalle */
  --text: #f2f0ec;          /* warmes Weiß */
  --leise: #a8a5a0;         /* gedämpftes Grau für kleine Texte */
  --schrift: "Futura", "Century Gothic", "Avenir Next", sans-serif;
}

body {
  margin: 0;
  font-family: var(--schrift);
  background: var(--hintergrund);
  color: var(--text);
}

a {
  color: inherit;   /* Links haben dieselbe Farbe wie der Text drumherum */
}

/* ---------- Navigation ---------- */
.menu {
  position: sticky;          /* bleibt beim Scrollen oben kleben */
  top: 0;
  z-index: 10;
  display: flex;             /* Links nebeneinander */
  flex-wrap: wrap;           /* auf dem Handy notfalls in 2 Zeilen */
  justify-content: center;
  gap: 16px 48px;
  padding: 20px;
  background: var(--hintergrund);
}

.menu a {
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 12px;
}

.menu a:hover,
.menu a[aria-current="page"] {   /* die Seite, auf der man gerade ist */
  color: var(--leise);
}

/* ---------- Name ---------- */
.titel {
  text-align: center;
  padding: 50px 20px 44px;
}

h1 {
  margin: 0;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  line-height: 1.1;
  /* clamp(min, ideal, max): Schrift wächst mit der Bildschirmbreite */
  font-size: clamp(26px, 4.5vw, 56px);
}

/* ---------- Logo ---------- */
/* Das Logo ist schwarz. invert(1) dreht die Farben um → weiß auf dunklem Grund */
.logo img,
.logo-klein img {
  filter: invert(1);
}

.logo img {
  width: clamp(220px, 32vw, 420px);
  margin: 0 auto;
}

/* ---------- Kopfzeile der Unterseiten: kleines Logo + Menü in einer Zeile ---------- */
.kopfzeile {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;   /* Logo ganz links, Menü ganz rechts */
  gap: 20px;
  padding: 16px 40px;
  background: var(--hintergrund);
}

.kopfzeile .menu {
  position: static;   /* klebt schon über die ganze Kopfzeile */
  padding: 0;
  gap: 12px 36px;
}

.logo-klein img {
  width: 150px;
}

/* Sprung-Ziele (#portfolio usw.) nicht unter dem klebenden Menü verstecken */
html {
  scroll-behavior: smooth;   /* weich hinunter scrollen statt springen */
}

[id] {
  scroll-margin-top: 70px;
}

/* Auf den Kategorie-Seiten ist die Überschrift noch etwas kleiner */
.titel.klein h1 {
  font-size: clamp(22px, 3vw, 36px);
}

.untertitel {
  margin: 18px auto 0;
  max-width: 560px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  line-height: 1.8;
  font-size: 12px;
  color: var(--leise);
}

/* ---------- Bilder allgemein ---------- */
figure {
  margin: 0;
}

img {
  display: block;
  width: 100%;      /* Bild füllt seinen Platz aus */
  height: auto;     /* Seitenverhältnis bleibt erhalten */
}

/* ---------- Großes Titelbild ---------- */
.titelbild {
  max-width: 1400px;
  margin: 0 auto;   /* "auto" links und rechts = zentriert */
  padding: 0 40px;
}

/* ---------- Intro-Text ---------- */
.intro {
  max-width: 640px;
  margin: 0 auto;
  padding: 100px 20px;
  text-align: center;
}

h2 {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 18px;
  margin: 0 0 30px;
}

.intro p {
  line-height: 1.8;
  font-size: 17px;
}

/* ---------- Drei Kategorien auf der Startseite ---------- */
.kategorien {
  display: grid;                          /* Raster */
  grid-template-columns: repeat(3, 1fr);  /* 3 gleich breite Spalten */
  gap: 40px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

.kategorie {
  text-decoration: none;
  overflow: hidden;
}

/* Alle drei Bilder gleich hoch zuschneiden (Hochformat 4:5) */
.kategorie img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

/* Wenn man mit der Maus drüberfährt: Bild zoomt leicht */
.kategorie:hover img {
  transform: scale(1.04);
  opacity: 0.85;
}

.kategorie figcaption {
  margin-top: 18px;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.kategorie figcaption::after {
  content: " →";
  color: var(--leise);
}

/* ---------- Galerie auf den Kategorie-Seiten ---------- */
.galerie {
  /* "columns" verteilt die Bilder auf 3 Spalten wie eine Pinnwand –
     Hoch- und Querformate passen so ohne Abschneiden zusammen */
  columns: 3;
  column-gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

.galerie .bild {
  display: block;
  margin-bottom: 24px;
  break-inside: avoid;      /* ein Bild nie auf 2 Spalten aufteilen */
  cursor: zoom-in;
}

.galerie .bild:hover img {
  opacity: 0.85;
}

/* ---------- Lightbox (großes Bild nach Klick) ---------- */
.lightbox {
  position: fixed;
  inset: 0;                  /* ganzer Bildschirm */
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(20, 20, 20, 0.96);
}

.lightbox.offen {
  display: flex;
}

.lightbox img {
  width: auto;
  max-width: 90vw;
  max-height: 90vh;
}

.lightbox button {
  position: absolute;
  background: none;
  border: none;
  color: var(--text);
  font-size: 48px;
  font-weight: 200;
  cursor: pointer;
  padding: 20px;
}

.lb-zu { top: 0; right: 10px; }
.lb-zurueck { left: 0; }
.lb-weiter { right: 0; }

/* ---------- Textseiten (Über mich, Kontakt) ---------- */
.seite {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 40px 0;
}

.seite.mitte {
  text-align: center;
  padding-top: 120px;
}

.zwei-spalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.text h1 {
  font-size: clamp(22px, 3vw, 36px);
  margin-bottom: 36px;
}

.text h2 {
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--leise);
  margin: 44px 0 12px;
}

.text p {
  line-height: 1.8;
  font-size: 16px;
}

.einleitung {
  font-size: 20px !important;
  line-height: 1.6 !important;
}

/* Foto von Steph auf "Über mich": bleibt beim Scrollen stehen, solange der Text läuft */
.portrait {
  position: sticky;
  top: 100px;
}

/* Knopf, z. B. "Shooting anfragen" */
.knopf {
  display: inline-block;
  margin-top: 40px;
  padding: 16px 32px;
  border: 1px solid var(--text);
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

.knopf:hover {
  background: var(--text);
  color: var(--hintergrund);
}

/* ---------- Kontaktformular ---------- */
.formular label {
  display: block;
  margin-bottom: 28px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--leise);
}

.formular input,
.formular select,
.formular textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;      /* Rand wird in die Breite eingerechnet */
  margin-top: 10px;
  padding: 12px 0;
  border: none;
  border-bottom: 1px solid #666;   /* nur eine Linie unten – schlicht */
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
}

.formular select option {
  color: #222;
}

.formular input:focus,
.formular select:focus,
.formular textarea:focus {
  outline: none;
  border-bottom-color: var(--text);
}

.formular .knopf {
  margin-top: 8px;
}

.versteckt {
  display: none;
}

/* ---------- Fußzeile ---------- */
footer {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--leise);
  padding: 120px 20px 40px;
}

footer a {
  text-decoration: none;
  text-transform: uppercase;
}

/* ---------- Tablet: 2 Spalten ---------- */
@media (max-width: 1000px) {
  .galerie { columns: 2; }
}

/* ---------- Handy: alles untereinander ---------- */
@media (max-width: 700px) {
  .menu { gap: 12px 20px; }
  .menu a { letter-spacing: 0.15em; font-size: 11px; }
  .kopfzeile { flex-direction: column; padding: 14px 16px; gap: 12px; }
  .logo-klein img { width: 130px; }
  .titelbild, .kategorien, .galerie { padding: 0 16px; }
  .kategorien { grid-template-columns: 1fr; gap: 48px; }
  .galerie { columns: 1; }
  .intro { padding: 60px 16px; }
  .seite { padding: 40px 16px 0; }
  .zwei-spalten { grid-template-columns: 1fr; gap: 48px; }
  .portrait { position: static; }   /* auf dem Handy normal mitscrollen */
}

/* ---------- Rechtliches (Impressum, Datenschutz) ---------- */
.rechtliches {
  max-width: 720px;
}

.rechtliches h2 {
  text-transform: none;
  letter-spacing: 0.05em;
  font-size: 15px;
  color: var(--text);
}

.rechtliches p {
  font-size: 15px;
}

footer .rechtlich {
  margin-bottom: 8px;
}

.formular-hinweis {
  font-size: 12px;
  line-height: 1.6;
  color: var(--leise);
  margin: 0 0 8px;
}