/* =========================================================
   Portfolio – Stylesheet
   Mobile-first: Grundregeln gelten fürs Smartphone,
   größere Bildschirme werden unten per @media angepasst.
   ========================================================= */

/* ---------- Farben & Maße (hier zentral anpassen) ---------- */
:root {
  --farbe-text: #2f3633;
  --farbe-text-leise: #7f918a;     /* Salbeigrau aus dem Logo */
  --farbe-akzent: #a8466f;         /* Beere aus dem Logo */
  --farbe-hintergrund: #ffffff;
  --farbe-flaeche: #f3f3f1;        /* Hintergrund für Platzhalter */
  --farbe-linie: #e4e6e4;

  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --rand: 16px;                    /* seitlicher Abstand zum Bildschirmrand */
  --abstand: 12px;                 /* Abstand zwischen Bildern */
  --max-breite: 1400px;
  --text-breite: 40rem;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--farbe-text);
  background: var(--farbe-hintergrund);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1; width: 100%; }

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }
a:hover { color: var(--farbe-akzent); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--farbe-akzent);
  outline-offset: 3px;
}

h1, h2, h3 { font-weight: 500; line-height: 1.25; margin: 0; }

/* ---------- Kopfbereich ---------- */
.kopf {
  width: 100%;
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 20px var(--rand);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.kopf__logo img { width: 130px; }

.menue {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

.menue a {
  text-decoration: none;
  color: var(--farbe-text-leise);
}
.menue a:hover,
.menue a[aria-current="page"] { color: var(--farbe-akzent); }

/* Sprachumschalter: zweigeteilte Flagge DE/EN, Klick wechselt die Sprache */
.sprache {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 6px;
  margin: -6px;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s, transform 0.2s;
}
.sprache svg {
  display: block;
  height: 18px;
  width: auto;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.sprache:hover { opacity: 1; transform: scale(1.08); }

/* Startseite: großes Logo zentriert, Menü darunter */
.startseite .kopf {
  flex-direction: column;
  padding-top: 32px;
  padding-bottom: 28px;
}
.startseite .kopf__logo img { width: min(78vw, 440px); }

/* ---------- Startseite: Projektkacheln ---------- */
.kacheln {
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 0 var(--rand) 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px var(--abstand);
}

.kachel {
  display: block;
  text-decoration: none;
}

.kachel__bild {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--farbe-flaeche);
}
.kachel__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.kachel__titel {
  margin-top: 12px;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}
.kachel__untertitel {
  margin: 2px 0 0;
  font-size: 0.9rem;
  color: var(--farbe-text-leise);
}

@media (hover: hover) {
  .kachel:hover .kachel__bild img { transform: scale(1.03); }
  .kachel:hover .kachel__titel { color: var(--farbe-akzent); }
}

/* Vollständige Website: Sprungmenü zu den Kategorien */
.kategorien {
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 0 var(--rand) 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}
.kategorien a { text-decoration: none; color: var(--farbe-text-leise); }
.kategorien a:hover { color: var(--farbe-akzent); }

.kategorie { scroll-margin-top: 16px; }
.kategorie__titel {
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 8px var(--rand) 16px;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--farbe-text-leise);
  display: flex;
  align-items: center;
  gap: 16px;
}
.kategorie__titel::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--farbe-linie);
}

/* Viele Projekte: kleinere Kacheln, zwei Spalten schon auf dem Smartphone */
.kacheln--viele {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px var(--abstand);
}
.kacheln--viele .kachel__titel { font-size: 0.95rem; margin-top: 8px; }
.kacheln--viele .kachel__titel,
.kacheln--viele .kachel__untertitel { line-height: 1.35; }
.kacheln--viele .kachel__untertitel { font-size: 0.8rem; margin-top: 4px; }

/* Bewerbungsseite: Begrüßung über den Projekten */
.willkommen {
  max-width: var(--text-breite);
  margin: 0 auto;
  padding: 0 var(--rand) 40px;
  line-height: 1.6;
}
.willkommen h1 {
  font-size: 1.6rem;
  text-align: center;
  color: var(--farbe-akzent);
  margin-bottom: 20px;
}
.willkommen p { margin: 0 0 1em; }
.willkommen p:last-child { margin-bottom: 0; color: var(--farbe-text-leise); font-size: 0.9rem; }
.willkommen a { color: var(--farbe-akzent); }
@media (min-width: 900px) {
  .willkommen { padding-bottom: 56px; }
  .willkommen h1 { font-size: 2rem; }
}

/* Bewerbungsseite: Verweis auf das vollständige Portfolio */
.mehr {
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 8px var(--rand) 48px;
  text-align: center;
  color: var(--farbe-text-leise);
}
.mehr span { display: block; font-size: 0.9rem; margin-bottom: 4px; }
.mehr a { color: var(--farbe-akzent); text-decoration: none; letter-spacing: 0.03em; }
.mehr a:hover { text-decoration: underline; }

/* Platzhalter, wenn noch kein Foto vorhanden ist */
.platzhalter {
  width: 100%;
  height: 100%;
  min-height: 200px;
  display: grid;
  place-items: center;
  color: var(--farbe-text-leise);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--farbe-flaeche);
}

/* ---------- Projektseite ---------- */
.projekt__titelbild {
  margin: 0 auto;
  max-width: var(--max-breite);
  padding: 0 var(--rand);
}
.projekt__titelbild button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--farbe-flaeche);
  cursor: zoom-in;
}
.projekt__titelbild img {
  width: 100%;
  max-height: 80vh;
  object-fit: contain;
}
.projekt__titelbild .platzhalter { aspect-ratio: 16 / 9; max-height: 50vh; }

/* Text-Blöcke (Projekt, Profil, Impressum ...) */
.text {
  max-width: var(--text-breite);
  margin: 0 auto;
  padding: 32px var(--rand);
}
.text h1 {
  font-size: 1.8rem;
  letter-spacing: 0.01em;
}
.text h1 + :not(.untertitel) { margin-top: 20px; }
.text .untertitel {
  margin: 4px 0 24px;
  color: var(--farbe-text-leise);
}
.text h2 {
  font-size: 1.1rem;
  margin: 28px 0 8px;
  color: var(--farbe-text-leise);
  letter-spacing: 0.04em;
}
.text p { margin: 0 0 1em; }

/* Steckbrief: Maßstab, Materialien, Techniken */
.steckbrief {
  margin: 0 0 28px;
  padding: 16px 0;
  border-top: 1px solid var(--farbe-linie);
  border-bottom: 1px solid var(--farbe-linie);
  display: grid;
  gap: 10px;
  font-size: 0.95rem;
}
.steckbrief div { display: grid; gap: 0; }
.steckbrief dt {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--farbe-text-leise);
}
.steckbrief dd { margin: 0; }
@media (min-width: 640px) {
  .steckbrief div { grid-template-columns: 9rem 1fr; gap: 16px; align-items: baseline; }
}
.text ul { margin: 0 0 1em; padding-left: 1.2em; }
.text li { margin-bottom: 0.25em; }
.text a { color: var(--farbe-akzent); }

/* Galerie: Bilder in ihrem Originalformat (nicht beschnitten).
   Die Breiten setzt js/galerie.js so, dass jede Zeile die volle Breite füllt. */
.galerie {
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 0 var(--rand) 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--abstand);
}
.galerie button {
  display: block;
  width: 100%;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--farbe-flaeche);
  cursor: zoom-in;
}
.galerie img { width: 100%; height: auto; }

/* Vor/Zurück-Navigation */
.blaettern {
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 24px var(--rand) 40px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--farbe-linie);
  font-size: 0.95rem;
}
.blaettern a { text-decoration: none; }
.blaettern small {
  display: block;
  color: var(--farbe-text-leise);
  font-size: 0.8rem;
}
.blaettern__weiter { text-align: right; margin-left: auto; }

/* ---------- Profilseite ---------- */
.profil__bild {
  margin: 0 auto;
  max-width: var(--text-breite);
  padding: 0 var(--rand);
}
.profil__bild img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 30%;
}

/* ---------- Fußbereich ---------- */
.fuss {
  border-top: 1px solid var(--farbe-linie);
  padding: 28px var(--rand) 36px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--farbe-text-leise);
}
.fuss__zeile {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 20px;
  margin-bottom: 10px;
}
.fuss a { text-decoration: none; color: inherit; }
.fuss a:hover { color: var(--farbe-akzent); }

/* ---------- Lightbox (Vollbild-Ansicht) ---------- */
.lightbox {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.97);
  overscroll-behavior: contain;
}
.lightbox::backdrop { background: rgba(255, 255, 255, 0.97); }
.lightbox[open] {
  display: grid;
  place-items: center;
}
.lightbox img {
  max-width: calc(100vw - 2 * var(--rand));
  max-height: calc(100vh - 110px);
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox__knopf {
  position: absolute;
  background: none;
  border: 0;
  padding: 12px;
  cursor: pointer;
  color: var(--farbe-text);
  font: 300 2rem/1 var(--schrift);
}
.lightbox__knopf:hover { color: var(--farbe-akzent); }
.lightbox__zu { top: 8px; right: 8px; }
.lightbox__zurueck { left: 4px; top: 50%; transform: translateY(-50%); }
.lightbox__vor { right: 4px; top: 50%; transform: translateY(-50%); }
.lightbox__zaehler {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--farbe-text-leise);
}

/* Fehlermeldung */
.hinweis {
  max-width: var(--text-breite);
  margin: 40px auto;
  padding: 0 var(--rand);
  color: var(--farbe-text-leise);
}

/* =========================================================
   Größere Bildschirme
   ========================================================= */

/* Tablet */
@media (min-width: 640px) {
  :root { --rand: 32px; --abstand: 16px; }
  .kopf__logo img { width: 160px; }
  .kacheln--viele { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Desktop: drei Projekte nebeneinander */
@media (min-width: 900px) {
  :root { --rand: 48px; --abstand: 20px; }

  .startseite .kopf { padding-top: 56px; padding-bottom: 48px; }

  .kacheln { grid-template-columns: repeat(3, 1fr); }
  .kacheln--viele { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px var(--abstand); }
  .kacheln--viele .kachel__titel { font-size: 1.05rem; }

  .text { padding-top: 48px; padding-bottom: 48px; }
  .text h1 { font-size: 2.2rem; }

  /* Profil: Bild links, Text rechts */
  .profil {
    max-width: var(--max-breite);
    margin: 0 auto;
    padding: 24px var(--rand) 48px;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
    align-items: start;
  }
  .profil__bild { padding: 0; max-width: none; position: sticky; top: 24px; }
  .profil__bild img { aspect-ratio: 4 / 5; }
  .profil .text { margin: 0; padding: 0; }

  .lightbox__zurueck { left: 16px; }
  .lightbox__vor { right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}