/* ===========================================================
   RESET / BASICS
   Weißer Hintergrund, keine Schatten, keine Outlines, keine Boxen
   =========================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --color-bg: #ffffff;
  --color-text: #000000;

  /* Schriftfamilien */
  --font-serif: 'EB Garamond', 'Garamond', serif;
  --font-sans:  'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-sans-weight: 400; /* etwas dünner als "Medium" (500) */

  /* Garamond-Größen (3 Stufen) */
  --font-xl: clamp(2.6rem, 6.5vw, 5rem);   /* große Überschrift */
  --font-lg: clamp(1.4rem, 3vw, 2.2rem);   /* kleinere Überschrift / großer Fließtext */
  --font-sm: 0.95rem;                       /* kleiner Fließtext, viele Infos */

  /* Helvetica-Größe & Zeilenabstand für Kopfzeile, Balken, Bildunterschriften */
  --font-meta: 0.8rem;
  --meta-line-height: 1.05;
  --meta-line-gap: 0.05rem; /* sehr enger Zeilenabstand zwischen Meta-Zeilen */

  /* Beschreibungs-Balken */
  --desc-bar-collapsed: 2.3rem;
  --desc-bar-expanded: 5rem;
}

html, body {
  width: 100%;
  height: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  overflow: hidden; /* die ganze Seite ist ein fixiertes Viewport-Layout, kein Scrollen */
}

body {
  font-family: var(--font-serif);
  position: relative;
  min-height: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  cursor: pointer;
  text-align: left;
}

img {
  display: block;
  max-width: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* ===========================================================
   BUTTONS — reine Schrift-Buttons, nie Box/Rahmen
   Farbe ändert sich nicht, nur die Unterstreichung erscheint
   =========================================================== */
.btn {
  display: inline-block;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-serif);
  color: var(--color-text);
  text-decoration: none;
  line-height: 1;
}

.btn:hover,
.btn:active,
.btn:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.12em;
}

.btn-xl { font-size: var(--font-xl); font-weight: 400; line-height: 1; }
.btn-lg { font-size: var(--font-lg); font-weight: 400; line-height: 1; margin-top: 0.05em; }

/* ===========================================================
   KOPFZEILE
   =========================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.6rem 0.9rem;
  z-index: 40; /* immer über allem anderen */
  font-family: var(--font-sans);
  font-weight: var(--font-sans-weight);
  font-size: var(--font-meta);
  background: transparent;
}

.header-link,
.contact-toggle {
  font-family: var(--font-sans);
  font-weight: var(--font-sans-weight);
  font-size: var(--font-meta);
  line-height: var(--meta-line-height);
  transition: text-decoration 0.15s ease;
}

.header-link:hover,
.header-link:active,
.header-link:focus-visible,
.contact-toggle:hover,
.contact-toggle:active,
.contact-toggle:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.12em;
}

.header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--meta-line-gap);
}

.contact-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--meta-line-gap);
}

.contact-details[hidden] {
  display: none;
}

.header-right {
  white-space: nowrap;
}

/* ===========================================================
   HERO — oberes Drittel, immer fixiert (kein Mitscrollen)
   =========================================================== */
.hero {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20; /* über der Galerie, damit Bilder "dahinter" sliden können */
  width: 100%;
  height: 33vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4.5rem 1rem 1rem;
  pointer-events: none; /* Klicks fallen auf die Galerie durch ... */
}

.hero .btn {
  pointer-events: auto; /* ... außer auf den Text der Buttons selbst */
}

/* ===========================================================
   GALERIE / SLIDESHOW
   Sitzt fest im Viewport, endet direkt oberhalb des Beschreibungs-Balkens
   =========================================================== */
.gallery-wrap {
  position: fixed;
  left: 0;
  bottom: var(--desc-bar-collapsed);
  width: 100%;
  height: calc(100dvh - var(--desc-bar-collapsed));
  overflow: hidden;
  z-index: 1; /* unter Header, Hero & Beschreibungs-Balken */
  cursor: grab;
  touch-action: pan-y;
}

.gallery-wrap.dragging {
  cursor: grabbing;
}

.gallery-track {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end; /* alle Boxen unten bündig */
  height: 100%;
  will-change: transform;
}

.gallery-item {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ===========================================================
   BESCHREIBUNGS-BALKEN (unten, fixiert)
   =========================================================== */
.desc-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--desc-bar-collapsed);
  background: var(--color-bg);
  z-index: 15; /* über der Galerie, unter Header/Hero */
  overflow: hidden;
  transition: height 0.3s ease;
}

.desc-bar.expanded {
  height: var(--desc-bar-expanded);
}

.desc-toggle {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.9rem;
  font-family: var(--font-sans);
  font-weight: var(--font-sans-weight);
  font-size: var(--font-meta);
  line-height: 1;
}

.desc-toggle:hover,
.desc-toggle:active,
.desc-toggle:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.12em;
}

.desc-track-wrap {
  position: relative;
  width: 100%;
  height: calc(var(--desc-bar-expanded) - var(--desc-bar-collapsed));
  overflow: hidden;
}

.desc-track {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  height: 100%;
  will-change: transform;
}

.desc-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--meta-line-gap);
}

.desc-item p {
  font-family: var(--font-sans);
  font-weight: var(--font-sans-weight);
  font-size: var(--font-meta);
  line-height: var(--meta-line-height);
  white-space: nowrap;
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 700px) {
  .site-header { padding: 0.5rem 0.7rem; }
  .hero { padding-top: 3.8rem; }
  :root {
    --font-xl: clamp(2.2rem, 10vw, 3.2rem);
    --font-lg: clamp(1.1rem, 5vw, 1.5rem);
  }
}