/* 10.7.2026 hellid Website Alexandra Jeschke – zentrales Stylesheet, v2
   (Hero mit Bild + Parallax, Logo, Vita-Listen, sanfte Animationen)
   ============================================================================
   AUFBAU:
   1. GRUNDEINSTELLUNGEN (Farben, Schriften, Abstände – hier zuerst schauen!)
   2. BASIS & TYPOGRAFIE
   3. KOPFZEILE / NAVIGATION (mit Logo)
   4. HERO (Hintergrundbild, weißer Text, Einblend-Animation)
   5. ABSCHNITTE (Vita mit Stationen/Ausstellungen, Kontakt)
   6. GALERIE (Masonry)
   7. LIGHTBOX
   8. FUSSZEILE
   9. UNTERSEITEN (Impressum/Datenschutz)
   10. ANIMATION & REDUCED MOTION
   11. RESPONSIVE (Tablet/Handy)
   ============================================================================ */

/* ===== 1. GRUNDEINSTELLUNGEN ===== */
:root {
  --farbe-text:      #1c1c1c;   /* Haupttext, fast schwarz */
  --farbe-grau:      #6f6f6f;   /* Sekundärtext */
  --farbe-linie:     #e6e3de;   /* Haarlinien */
  --farbe-fond:      #ffffff;   /* Seitenhintergrund */
  --farbe-fond-alt:  #faf9f7;   /* leicht warmes Weiß für Wechselflächen */
  --farbe-akzent:    #8a7d66;   /* gedecktes Bronze für feine Akzente */
  --farbe-hero-blau: #2c3d52;   /* Fallback hinter dem Hero-Bild */

  /* Ohne externe Fonts (kein Consent-Banner nötig): System-Schriften */
  --schrift-serif: Georgia, "Times New Roman", "Songti SC", serif;
  --schrift-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                   "Helvetica Neue", Arial, sans-serif;

  --breite-inhalt: 1100px;
  --breite-text:   680px;
}

/* ===== 2. BASIS & TYPOGRAFIE ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* 10.7.2026 hellid Responsive-Sicherung: "clip" statt "hidden", denn
   overflow-x:hidden bricht position:sticky (Header klebte nicht!);
   die hidden-Zeile bleibt als Fallback für ältere Browser stehen. */
html, body { overflow-x: hidden; overflow-x: clip; }
html { scroll-behavior: smooth; }

/* Anker-Sprünge nicht unter dem klebenden Header verstecken */
.abschnitt { scroll-margin-top: 4.8rem; }

body {
  font-family: var(--schrift-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--farbe-text);
  background: var(--farbe-fond);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--schrift-serif);
  font-weight: 400;
  line-height: 1.2;
}

a { color: inherit; }

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

/* ===== 3. KOPFZEILE / NAVIGATION ===== */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(6px);        /* ältere Safari-Versionen */
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--farbe-linie);
}

.kopf-innen {
  max-width: var(--breite-inhalt);
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  white-space: nowrap;                       /* Stolperfalle iPhone: nie 2-zeilig */
}

.marke {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--farbe-text);
}

.logo {
  height: 3.15rem;                           /* 10.7.2026 hellid +50% auf Wunsch Helmut */
  width: auto;
  display: block;
  color: var(--farbe-text);                  /* Inline-SVG folgt currentColor */
  flex-shrink: 0;
}

.marke-text {
  font-family: var(--schrift-serif);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}

.hauptmenue a {
  margin-left: 1.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--farbe-grau);
  transition: color 0.2s ease;
}

.hauptmenue a:hover,
.hauptmenue a:focus { color: var(--farbe-text); }

/* 10.7.2026 hellid Toggle-Knopf fürs Smartphone-Menü (Kreis mit 3 Linien,
   wird zum X). Am Desktop unsichtbar – Einblendung siehe Abschnitt 11. */
.menue-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--farbe-text);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  flex-shrink: 0;
}

.menue-toggle span {
  display: block;
  width: 15px;
  height: 1.5px;
  background: var(--farbe-text);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

/* offener Zustand: Linien formen ein X */
.menue-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menue-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menue-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ===== 4. HERO (Bild "Miniatur in blau", weißer Text, Parallax) ===== */
.hero {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.5rem;
  overflow: hidden;                           /* Parallax-Bild bleibt im Rahmen */
  background: var(--farbe-hero-blau);         /* Fallback, solange Bild lädt */
}

/* Das Bild ist höher als der Hero und wird per script.js langsamer
   mitbewegt (Parallax). Ohne JS/bei reduced motion steht es einfach still. */
.hero-bg {
  position: absolute;
  top: -18%; bottom: -18%; left: 0; right: 0; /* Luft oben/unten für Parallax
                                                 (Langform statt inset: auch
                                                 ältere Browser sicher) */
  background-image: url("media/header-hintergrund.jpg");
  background-size: cover;
  background-position: center;
  will-change: transform;
}

/* Zarte Abdunkelung für Lesbarkeit des weißen Textes */
.hero-schleier {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg,
              rgba(16, 26, 42, 0.30) 0%,
              rgba(16, 26, 42, 0.18) 45%,
              rgba(16, 26, 42, 0.42) 100%);
}

.hero-inhalt { position: relative; }

.hero-auftakt {
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 1.4rem;
}

.hero-name {
  font-size: clamp(2.4rem, 7.5vw, 5rem);
  letter-spacing: 0.02em;
  color: #ffffff;
  text-shadow: 0 2px 26px rgba(10, 18, 30, 0.35);
}

.hero-untertitel {
  margin-top: 1.2rem;
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  color: rgba(255, 255, 255, 0.92);
  font-style: italic;
  font-family: var(--schrift-serif);
  letter-spacing: 0.04em;
}

.hero-pfeil {
  display: inline-block;
  margin-top: 3.2rem;
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: transform 0.3s ease, color 0.2s ease;
}
.hero-pfeil:hover { transform: translateY(4px); color: #fff; }

/* Sanftes Einfaden des Hero-Textes beim Laden (gestaffelt) */
.einblenden {
  opacity: 0;
  transform: translateY(14px);
  animation: einblenden 1.1s ease forwards;
}
.hero-auftakt.einblenden    { animation-delay: 0.15s; }
.hero-name.einblenden       { animation-delay: 0.35s; }
.hero-untertitel.einblenden { animation-delay: 0.65s; }
.hero-pfeil.einblenden      { animation-delay: 1.0s; }

@keyframes einblenden {
  to { opacity: 1; transform: none; }
}

/* ===== 5. ABSCHNITTE ===== */
.abschnitt {
  max-width: var(--breite-inhalt);
  margin: 0 auto;
  padding: 6rem 1.5rem;
}

.abschnitt-label {
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--farbe-akzent);
  margin-bottom: 0.8rem;
}

.abschnitt h2 {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  margin-bottom: 2.2rem;
}

.vita-text { max-width: var(--breite-text); }
.vita-text p + p { margin-top: 1.2rem; }

/* Stationen & Ausstellungen: zwei ruhige Spalten mit Jahreszahlen */
.vita-spalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-top: 3.5rem;
}

.vita-spalte h3 {
  font-size: 1.2rem;
  margin-bottom: 1.2rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--farbe-linie);
}

.vita-liste { list-style: none; }

.vita-liste li {
  display: grid;
  grid-template-columns: 6.2rem 1fr;
  gap: 0.8rem;
  padding: 0.45rem 0;
  font-size: 0.95rem;
  line-height: 1.55;
}

.vita-liste li span {
  color: var(--farbe-akzent);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding-top: 0.1rem;
}

/* Kontakt */
.kontakt { text-align: center; }
.kontakt h2 { margin-bottom: 1.2rem; }

.kontakt-text {
  max-width: 34rem;
  margin: 0 auto 2.4rem;
  color: var(--farbe-grau);
}

.kontakt-aktionen {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Kontakt-Elemente faden gestaffelt ein (reveal + Verzögerung) */
.kontakt .knopf.reveal        { transition-delay: 0.15s; }
.kontakt .knopf-voll.reveal   { transition-delay: 0s; }
.kontakt .kontakt-adresse.reveal { transition-delay: 0.3s; }

.knopf {
  display: inline-block;
  padding: 0.85rem 2.2rem;
  border: 1px solid var(--farbe-text);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease,
              opacity 0.7s ease, transform 0.7s ease;
}
.knopf:hover { background: var(--farbe-text); color: #fff; }

.knopf-voll { background: var(--farbe-text); color: #fff; }
.knopf-voll:hover { background: #000; }

.kontakt-adresse {
  margin-top: 2.6rem;
  font-size: 0.9rem;
  color: var(--farbe-grau);
  letter-spacing: 0.02em;
}

/* ===== 6. GALERIE (Masonry über CSS-Spalten, keine Library) ===== */
.galerie {
  columns: 3;
  column-gap: 1.6rem;
}

.werk {
  break-inside: avoid;
  margin: 0 0 1.6rem;
  cursor: zoom-in;
}

.werk img {
  width: 100%;
  background: var(--farbe-fond-alt);       /* dezente Fläche, solange Bild lädt */
  transition: opacity 0.25s ease, box-shadow 0.25s ease;
}
.werk:hover img {
  opacity: 0.94;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.10);
}

.werk figcaption {
  padding-top: 0.55rem;
  font-size: 0.85rem;
  color: var(--farbe-grau);
  line-height: 1.45;
}
.werk figcaption .werk-titel {
  color: var(--farbe-text);
  font-family: var(--schrift-serif);
  font-style: italic;
  font-size: 0.95rem;
}

/* ===== 7. LIGHTBOX (helle Galerie-Anmutung) ===== */
.lightbox {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 100;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ffffff;                       /* deckend – ruhige Werkansicht */
  padding: 3.5rem 4.5rem;
}
.lightbox.offen { display: flex; }

.lightbox img {
  max-width: 100%;
  max-height: calc(100vh - 11rem);
  width: auto;
  height: auto;
  box-shadow: 0 10px 45px rgba(0, 0, 0, 0.12);
}

.lightbox-text {
  margin-top: 1.3rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--farbe-grau);
  max-width: 34rem;
}
.lightbox-text .lb-titel {
  display: block;
  color: var(--farbe-text);
  font-family: var(--schrift-serif);
  font-style: italic;
  font-size: 1.1rem;
  margin-bottom: 0.15rem;
}

.lightbox button {
  position: absolute;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--farbe-grau);
  font-size: 1.9rem;
  line-height: 1;
  padding: 0.6rem;
  transition: color 0.2s ease;
  font-family: var(--schrift-sans);
}
.lightbox button:hover { color: var(--farbe-text); }

.lb-zu      { top: 1rem; right: 1.4rem; font-size: 1.6rem; }
.lb-zurueck { left: 0.8rem; top: 50%; transform: translateY(-50%); }
.lb-weiter  { right: 0.8rem; top: 50%; transform: translateY(-50%); }

/* ===== 8. FUSSZEILE ===== */
.fuss {
  border-top: 1px solid var(--farbe-linie);
  background: var(--farbe-fond-alt);
}

.fuss-innen {
  max-width: var(--breite-inhalt);
  margin: 0 auto;
  padding: 2.2rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--farbe-grau);
}

.fuss-menue a {
  margin-left: 1.4rem;
  text-decoration: none;
  color: var(--farbe-grau);
}
.fuss-menue a:first-child { margin-left: 0; }
.fuss-menue a:hover { color: var(--farbe-text); }

/* ===== 9. UNTERSEITEN (Impressum/Datenschutz) ===== */
.unterseite {
  max-width: var(--breite-text);
  margin: 0 auto;
  padding: 4.5rem 1.5rem 6rem;
}
.unterseite h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin-bottom: 2rem; }
.unterseite h2 { font-size: 1.35rem; margin: 2.4rem 0 0.7rem; }
.unterseite h3 { font-size: 1.1rem; margin: 1.8rem 0 0.5rem; }
.unterseite h4 { font-size: 1rem; margin: 1.3rem 0 0.4rem;
                 font-family: var(--schrift-sans); font-weight: 600; }
.unterseite p + p { margin-top: 0.9rem; }
.unterseite ul { margin: 0.9rem 0 0.9rem 1.3rem; }
.unterseite li + li { margin-top: 0.5rem; }
.unterseite a { color: var(--farbe-akzent); }

/* ===== 10. ANIMATION & REDUCED MOTION ===== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.sichtbar { opacity: 1; transform: none; }
/* .knopf hat eigene transition-Liste (Hover + Reveal kombiniert, s.o.) */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .einblenden { opacity: 1; transform: none; animation: none; }
  .hero-bg { top: 0; bottom: 0; }                     /* kein Parallax, Bild exakt im Hero */
  .hero-pfeil, .knopf, .werk img { transition: none; }
}

/* ===== 11. RESPONSIVE ===== */
/* Smartphone-Menü: Toggle-Knopf + aufklappende Liste unter der Kopfzeile.
   Greift nur, wenn JavaScript läuft (html.js) – ohne JS bleibt das normale
   Inline-Menü sichtbar, damit die Navigation nie verloren geht. */
@media (max-width: 700px) {
  .js .menue-toggle { display: flex; }
  .js .hauptmenue {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border-bottom: 1px solid var(--farbe-linie);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.07);
  }
  .js .hauptmenue.offen { display: block; }
  .js .hauptmenue a {
    display: block;
    margin: 0;
    padding: 1.05rem 1.3rem;
    border-top: 1px solid var(--farbe-linie);
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    color: var(--farbe-text);
  }
  .js .hauptmenue a:hover,
  .js .hauptmenue a:focus { background: var(--farbe-fond-alt); }
}

@media (max-width: 900px) {
  .galerie { columns: 2; column-gap: 1.2rem; }
  .werk { margin-bottom: 1.2rem; }
  .abschnitt { padding: 4.5rem 1.25rem; }
  .vita-spalten { grid-template-columns: 1fr; gap: 2.2rem; }
  .lightbox { padding: 3.2rem 3rem; }
}

@media (max-width: 560px) {
  /* 10.7.2026 hellid Handy-Galerie 2-spaltig + kompakt, Header ~quadratisch */
  .galerie { columns: 2; column-gap: 0.7rem; }
  .werk { margin-bottom: 0.7rem; }
  .werk figcaption { font-size: 0.68rem; line-height: 1.35; padding-top: 0.35rem; }
  .werk figcaption .werk-titel { font-size: 0.78rem; }
  .abschnitt { padding: 3.5rem 1.1rem; }
  .hero { min-height: 100vw; padding: 2.5rem 1.1rem; }  /* ~quadratisch */
  .hero-auftakt { margin-bottom: 1rem; }
  .hero-pfeil { margin-top: 1.8rem; }
  .kopf-innen { padding: 0.7rem 1rem; }
  .logo { height: 2.7rem; }                  /* 10.7.2026 hellid +50% auch mobil */
  .marke-text { display: none; }             /* am Handy reicht das Logo, sonst
                                                wird die Kopfzeile zu breit */
  .hauptmenue a { margin-left: 0.8rem; font-size: 0.7rem; letter-spacing: 0.1em; }
  .vita-liste li { grid-template-columns: 5rem 1fr; gap: 0.6rem; }
  .kontakt-aktionen { flex-direction: column; align-items: stretch; }
  .knopf { text-align: center; }
  .lightbox { padding: 3rem 0.9rem 1.5rem; }
  .lightbox img { max-height: calc(100vh - 10rem); }
  .lb-zurueck { left: 0.1rem; }
  .lb-weiter { right: 0.1rem; }
  .fuss-innen { flex-direction: column; text-align: center; }
}