/* DroneGrafie.com – Design-System
   Dunkle, ruhige Bühne für Luftbildfotografie: großzügige Bildflächen,
   zurückhaltende Typografie, ein warmer Akzentton (golden-hour). */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  --bg: #0b0c0e;
  --bg-raised: #131518;
  --bg-raised-2: #1a1d21;
  --border: #26292e;
  --text: #eef0f2;
  --text-dim: #9ba1a8;
  --text-faint: #6b7178;
  --accent: #d9a15b;
  --accent-strong: #e8b878;
  --danger: #d9705b;
  --focus: #d9a15b;

  --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius: 6px;
  --radius-lg: 14px;
  /* Fixer Max-Wert liess auf sehr breiten/grossen Bildschirmen links/rechts
     ungenutzte schwarze Raender stehen, unabhaengig von der Grid-Spaltenzahl
     - skaliert jetzt mit der Fensterbreite, mit einer Obergrenze nur gegen
     absurd lange Zeilen auf 5K+ Displays. */
  --container: min(96vw, 2400px);
  --gutter: clamp(1rem, 2.2vw, 2.25rem);
}

* { box-sizing: border-box; }
html { color-scheme: dark; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 0.5em;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.4rem, 5.5vw, 4.25rem); font-weight: 600; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: 1.1rem; font-weight: 600; font-family: var(--font-body); letter-spacing: normal; }

p { color: var(--text-dim); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---- Bilder: kein Download-Komfort (Abschreckung, kein echter Schutz) ---- */
.protected-image {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: auto;
}

/* ---------------------------------------------------------------- Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem var(--gutter);
  background: linear-gradient(to bottom, rgba(11,12,14,0.92), rgba(11,12,14,0.75) 70%, transparent);
  backdrop-filter: blur(8px);
}

.brand {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.brand span { color: var(--accent); }
.brand-logo {
  height: 1.7rem;
  width: auto;
  opacity: 0.85;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  font-size: 0.92rem;
  color: var(--text-dim);
}
.main-nav a:hover { color: var(--text); }
.main-nav a.active { color: var(--accent); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.5rem;
  cursor: pointer;
}

@media (max-width: 860px) {
  .main-nav { display: none; }
  .main-nav.open {
    display: flex;
    /* fixed statt absolute: auf der Startseite steckt der Header in einem
       overflow:hidden-Container (.home-viewport, verhindert Seiten-Scroll) -
       ein absolut positioniertes Dropdown würde dort unsichtbar abgeschnitten.
       fixed hat die Viewport-Grenze als Containing Block und entkommt dem
       Clipping; "top" wird per JS (nav.js) exakt auf die Header-Unterkante gesetzt. */
    position: fixed;
    left: 0; right: 0;
    z-index: 50;
    flex-direction: column;
    gap: 0;
    background: var(--bg-raised);
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 0;
  }
  .main-nav.open a { padding: 0.9rem var(--gutter); border-top: 1px solid var(--border); }
  .nav-toggle { display: block; }
}

/* ------------------------------------------------------------------ Hero */
.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  padding: 4rem var(--gutter);
  margin-top: -5.5rem;
  background: var(--bg-raised) center/cover no-repeat;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,7,8,0.97) 0%, rgba(6,7,8,0.55) 45%, rgba(6,7,8,0.7) 100%);
}
/* Textblock bekommt zusätzlich eine eigene "Glas"-Fläche (Blur + dunkler,
   halbtransparenter Grund) - unabhängig davon, wie hell/unruhig das
   jeweilige Zufallsfoto dahinter ist, bleibt der Text so immer auf einem
   gleichmäßig dunklen Grund lesbar, nicht nur durch den seitenweiten
   Verlauf, der bei sehr hellen Fotos allein nicht immer reicht. */
.hero-content {
  position: relative;
  max-width: 42rem;
  background: rgba(6,7,8,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
}
.hero-eyebrow {
  color: var(--accent-strong);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.hero h1 { color: var(--text); }
.hero p { color: #e5e7ea; font-size: 1.05rem; max-width: 34rem; }

/* ------------------------------------------------------- Seiten-Banner */
/* Kompaktere Variante des Hero-Banners für Über mich/Impressum/Datenschutz -
   gleicher Kontrast-Ansatz, aber deutlich niedriger, da hier kein
   Ganzbildschirm-Layout wie auf der Startseite nötig ist. */
.page-hero {
  position: relative;
  min-height: 30vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  padding: 4rem var(--gutter) 2.5rem;
  margin-top: -5.5rem;
  background: var(--bg-raised) center/cover no-repeat;
}
.page-hero::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 0;
  background: linear-gradient(to top, rgba(6,7,8,0.97) 0%, rgba(6,7,8,0.6) 60%, rgba(6,7,8,0.75) 100%);
}
/* Eigener, ausdrücklich über dem abdunkelnden Verlauf liegender Bereich für
   Titel + Zurück-Link - vorher stand der Link nur per "position:relative"
   ohne z-index daneben und landete je nach Stacking-Kontext unter/knapp
   über dem Verlauf, dazu kaum sichtbar in gedecktem Grau. */
.page-hero-content {
  position: relative;
  z-index: 1;
}
.page-hero h1 {
  position: relative;
  margin: 0;
  color: var(--text);
  display: inline-block;
  background: rgba(6,7,8,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius);
  padding: 0.6rem 1rem;
}
.page-hero-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgba(6,7,8,0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.85rem;
}
.page-hero-back:hover { border-color: var(--accent); color: var(--accent-strong); }

/* ------------------------------------------------- Startseite (ein Bildschirm) */
/* Slogan + Kategorien sollen auf der Startseite immer ohne Scrollen zu sehen
   sein, unabhängig von Bildschirmgröße - Hero behält seine Mindesthöhe nie
   starr bei, sondern schrumpft/wächst über flex + vh/vw-Clamp mit der
   Fensterhöhe; die Kategorie-Kacheln füllen den Rest und passen ihre eigene
   Höhe über grid-auto-rows an (kein festes aspect-ratio mehr auf dieser Seite). */
body.home-page {
  height: 100vh; /* Fallback fuer Browser ohne dvh-Unterstuetzung (aeltere Tablets) */
  height: 100dvh;
  overflow: hidden;
}
.home-viewport {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.home-viewport .site-header { position: static; flex: 0 0 auto; background: none; backdrop-filter: none; }
.home-viewport .site-footer { flex: 0 0 auto; padding: 0.85rem var(--gutter) 1.1rem; }
.home-hero {
  flex: 0 0 auto;
  min-height: 0;
  margin-top: 0;
  align-items: flex-start;
  padding: 1.5rem var(--gutter) 1.75rem;
}
.home-hero h1 { font-size: clamp(1.5rem, 1.6vw + 1.6vh, 3.75rem); }
.home-hero p { font-size: clamp(0.85rem, 0.3vw + 0.9vh, 1.05rem); }

/* Hohe, schmale Bildschirme (Smartphones im Hochformat): die vh-Anteile aus
   der Formel oben skalieren dort viel zu stark (Bildschirmhöhe ist bei
   einem Handy groß, obwohl der Platz in der Breite knapp ist) - Slogan
   sonst riesig, Kategorie-Kacheln darunter blieben kaum Platz. Feste,
   deutlich kleinere Größe statt der Höhen-Formel. */
@media (max-width: 480px) {
  .home-hero h1 { font-size: 1.15rem; line-height: 1.25; margin-bottom: 0.35em; }
  .home-hero p { font-size: 0.78rem; }
  .home-hero .hero-eyebrow { font-size: 0.68rem; margin-bottom: 0.4rem; }
  .home-hero { padding: 0.75rem var(--gutter) 0.75rem; }
  .hero-content { padding: 0.75rem 0.9rem; }
}

/* Querformat-Tablets (breit, aber knapp in der Höhe): die Formel oben
   gewichtet 1.6vw stark genug, dass der Slogan bei grosser Breite trotz
   wenig Höhe gross bleibt - dadurch blieb praktisch kein Platz mehr für die
   Kategorien, "man kommt nicht nach unten". Greift über max-height statt
   max-width, erfasst also gezielt "breit + niedrig" unabhängig von der
   genauen Breite (Tablet-Querformat, aber auch Handy-Querformat). */
@media (max-height: 500px) {
  .home-hero h1 { font-size: 1.3rem; line-height: 1.25; margin-bottom: 0.3em; }
  .home-hero p { font-size: 0.82rem; }
  .home-hero .hero-eyebrow { font-size: 0.7rem; margin-bottom: 0.35rem; }
  .home-hero { padding: 0.6rem var(--gutter) 0.6rem; }
  .hero-content { padding: 0.6rem 0.9rem; }
}

.home-grid-section {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  padding-bottom: 1.5rem;
}
.home-grid-container {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.home-grid-container .section-heading { flex: 0 0 auto; margin-bottom: 1rem; }
.home-grid {
  flex: 1 1 auto;
  min-height: 0;
  grid-auto-rows: minmax(90px, 1fr);
  overflow-y: auto;
}
.home-grid .card { aspect-ratio: auto; height: 100%; }

/* ---------------------------------------------------------------- Grids */
.section {
  padding: 3.5rem var(--gutter);
}
.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.25rem;
}
.section-heading p { margin: 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 0.9rem;
}
@media (max-width: 480px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
}

.card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-raised);
  border: 1px solid var(--border);
}
.card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.card:hover img { transform: scale(1.06); }
.card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.05) 55%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem;
}
.card-overlay h3 { margin: 0; color: var(--text); }
.card-overlay .count { color: var(--text-dim); font-size: 0.85rem; margin-top: 0.2rem; }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 0.6rem;
}
@media (max-width: 480px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
}
.photo-grid .thumb {
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-raised);
  cursor: zoom-in;
  border: 1px solid var(--border);
}
.photo-grid .thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
}
.photo-grid .thumb:hover img { transform: scale(1.05); }
.photo-grid .thumb.thumb-video { position: relative; }
.photo-grid .thumb.thumb-video video {
  width: 100%; height: 100%; object-fit: cover; pointer-events: none;
}
.thumb-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.7);
  pointer-events: none;
}

.empty-state {
  color: var(--text-faint);
  padding: 3rem 0;
  text-align: center;
}

/* ---------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--text);
  cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a1305;
  font-weight: 600;
}
.btn-accent:hover { background: var(--accent-strong); border-color: var(--accent-strong); }

/* ---------------------------------------------------------------- Forms */
.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.1rem; }
.field label { font-size: 0.85rem; color: var(--text-dim); }
.field input, .field select, .field textarea {
  background: var(--bg-raised-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* ---------------------------------------------------------------- Modal */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(6,7,8,0.8);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: 1.5rem;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  max-width: 30rem;
  width: 100%;
  padding: 2rem;
  max-height: 85vh;
  overflow-y: auto;
}
.modal-close {
  position: absolute;
  top: 1rem; right: 1.25rem;
  background: none; border: none;
  color: var(--text-dim);
  font-size: 1.5rem;
  cursor: pointer;
}

/* ---------------------------------------------------------------- Lightbox */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(6,7,8,0.97);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox img,
.lightbox video {
  max-width: 99vw; max-height: 98vh;
  width: auto; height: auto;
  object-fit: contain;
}
/* Nav-Zonen starten erst UNTER der Kopfzeile (Schließen/Stern/Zurück) - vorher
   überlappte die volle Höhe der "Nächstes Foto"-Zone die kleinen Buttons oben
   rechts, die (später im DOM) zwar meist trotzdem klickbar waren, auf einem
   schmalen Handy-Bildschirm aber leicht daneben getroffen wurden ("X springt
   zu einem anderen Bild" statt zu schließen). Zusätzlich explizites z-index,
   damit die Buttons in JEDEM Fall Vorrang vor der Nav-Zone haben. */
.lightbox-nav {
  position: absolute;
  top: 4.5rem; bottom: 0;
  width: 4.5rem;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none;
  color: var(--text);
  font-size: 2rem;
  cursor: pointer;
  opacity: 0.5;
  z-index: 1;
}
.lightbox-nav:hover { opacity: 1; }
.lightbox-nav.prev { left: 0; }
.lightbox-nav.next { right: 0; }
.lightbox-top-bar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  z-index: 2;
}
.lightbox-back {
  color: var(--text-dim);
  font-size: 0.85rem;
  text-decoration: none;
  background: rgba(0,0,0,0.4);
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
}
.lightbox-back:hover { color: var(--text); }
.lightbox-top-actions { display: flex; align-items: center; gap: 0.75rem; }
.lightbox-close {
  background: none; border: none;
  color: var(--text); font-size: 1.75rem;
  cursor: pointer;
  min-width: 2.75rem; min-height: 2.75rem;
}
.lightbox-star {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: none; cursor: pointer; font-size: 1.2rem; line-height: 1;
  background: rgba(255,255,255,0.12); color: var(--text-dim);
}
.lightbox-star:hover { background: rgba(255,255,255,0.22); }
.lightbox-star.active { background: var(--accent); color: #000; }
.lightbox-caption {
  position: absolute; bottom: 1.5rem; left: 0; right: 0;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.85rem;
}

/* ---------------------------------------------------------------- Footer */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 3rem var(--gutter) 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  color: var(--text-faint);
  font-size: 0.85rem;
}
.footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-links a:hover { color: var(--text-dim); }
.version-badge {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  cursor: pointer;
  font-size: 0.78rem;
}
.version-badge:hover { border-color: var(--accent); }

/* ---------------------------------------------------------------- Legal / prose pages */
.prose { max-width: 44rem; margin: 0 auto; }
.prose h2 { margin-top: 2rem; }
.prose p, .prose li { color: var(--text-dim); }

.about-layout {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: 3rem;
  align-items: start;
  max-width: 56rem;
  margin: 0 auto;
}
.about-photo {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  position: sticky;
  top: 7rem;
}
@media (max-width: 720px) {
  .about-layout { grid-template-columns: 1fr; }
  .about-photo { max-width: 12rem; position: static; }
}

/* ---------------------------------------------------------------- Changelog */
.changelog-row {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
.changelog-row:last-child { border-bottom: none; }
.changelog-meta { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.changelog-version { font-family: var(--font-display); color: var(--accent); }
.changelog-date { color: var(--text-faint); font-size: 0.8rem; }
.changelog-badge {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-dim);
}
.changelog-row ul { margin: 0.3rem 0 0; padding-left: 1.1rem; color: var(--text-dim); }