/* Barlow fallback: Google Fonts, SIL Open Font License (fonts/Barlow-OFL.txt). */
@font-face { font-family: "Barlow"; font-weight: 300; font-display: swap;
  src: url("/fonts/Barlow-Light.ttf") format("truetype"); unicode-range: U+0000-00FF; }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap;
  src: url("/fonts/Barlow-Regular.ttf") format("truetype"); unicode-range: U+0000-00FF; }
:root {
    --bg: #fff;
    --fg: #1a1a1a;
    --muted: #6b6b6b;
    --line: #d9d9d9;
    --pad-m: 20px;               /* Handy: Abstand links */
    --pad-d: 10vw;               /* Desktop: Überschriften und Text, 1/10 von links */
    --pad-r-d: 20vw;             /* Desktop: Weißraum rechts, 1/5 */
    --logo-left-d: 10vw;         /* Desktop: Logo, 1/10 von links */
    --logo-gap: clamp(2.25rem, 4.5vw, 3.5rem);   /* Weißraum Logo oben = Logo unten */
    --gap-section: clamp(7.5rem, 17vw, 15rem);   /* Weißraum Galerie → nächste Überschrift */
    --gallery-h: min(64svh, 125vw);   /* Handy: alle Bilder gleich hoch, Breite je nach Format */
    --font-text: "DIN Pro", "DIN Alternate", "Barlow", system-ui, sans-serif;
    --font-sub: "Noka", "DIN Pro", system-ui, sans-serif;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --bg: #141414; --fg: #eee; --muted: #9a9a9a; --line: #333; color-scheme: dark; }
  }
  :root[data-theme="dark"] { --bg: #141414; --fg: #eee; --muted: #9a9a9a; --line: #333; color-scheme: dark; }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body {
    margin: 0; background: var(--bg); color: var(--fg);
    font: 400 1.0625rem/1.6 var(--font-text);
    padding-bottom: env(safe-area-inset-bottom);
  }
  img, video { display: block; max-width: 100%; }
  figure { margin: 0; }

  /* ---------- Header / Logo (links) ---------- */
  .site-header {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
    padding: calc(var(--logo-gap) + env(safe-area-inset-top)) 20px 0 var(--pad-m);
  }
  .theme-toggle {
    flex: none; width: 44px; height: 44px; display: grid; place-items: center;
    background: transparent; color: var(--fg); border: 1px solid var(--line);
    border-radius: 50%; cursor: pointer;
  }
  .theme-toggle:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
  .theme-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .theme-toggle .sun { display: none; }
  :root[data-theme="dark"] .theme-toggle .sun { display: block; }
  :root[data-theme="dark"] .theme-toggle .moon { display: none; }
  .site-header img { height: clamp(68px, 10.2vw, 107px); width: auto; }
  :root[data-theme="dark"] .logo { filter: invert(1); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo { filter: invert(1); } }

  /* ---------- Abschnitte ---------- */
  .section { margin-top: var(--gap-section); }
  .hero { margin-top: var(--logo-gap); }              /* kleiner Abstand zum Logo */
  .head-text { margin-top: clamp(2.25rem, 4.5vw, 3.5rem); }
  .copy + .gallery { margin-top: clamp(2rem, 4vw, 3.25rem); }

  /* ---------- Galerie (swipe, Bild + Video) ---------- */
  .gallery { position: relative; }
  .track {
    display: flex; gap: 0;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .track::-webkit-scrollbar { display: none; }
  .slide {
    flex: 0 0 auto;                /* Breite ergibt sich aus dem Bildformat, kein Weißraum dazwischen */
    height: var(--gallery-h);
    scroll-snap-align: start;
  }
  .slide img, .slide video { width: 100%; height: 100%; object-fit: cover; }
  .slide video { object-fit: contain; background: #000; }
  .slide:has(video) { aspect-ratio: 16 / 9; }
  .slide.portrait { aspect-ratio: 9 / 16; }
  /* Video mit zwei Fassungen: Handy = Hochformat (hoch), Desktop = Querformat */
  .slide.dual { aspect-ratio: 9 / 16; }
  .slide.dual .v-quer { display: none; }
  /* Handy: Video füllt die ganze Bildschirmbreite, Querformat wird links und rechts beschnitten */
  @media (max-width: 899px) {
    .slide.fill { flex: 0 0 100%; aspect-ratio: auto; }
    .slide.fill video { object-fit: cover; }
  }

  .nav {
    position: absolute; top: 50%; translate: 0 -50%;
    width: 48px; height: 48px; border: 0; border-radius: 50%;
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    color: var(--fg); font-size: 1.4rem; cursor: pointer;
    backdrop-filter: blur(6px); display: none;
  }
  .nav:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
  .nav[data-dir="prev"] { left: 16px; }
  .nav[data-dir="next"] { right: 16px; }
  @media (hover: hover) and (pointer: fine) { .nav { display: block; } }

  /* ---------- Überschrift + Text ---------- */
  .copy { padding: 0 var(--pad-m); }
  h2 {
    margin: 0 0 1.4rem;
    font: 300 clamp(2.25rem, 7vw, 4.5rem)/1.05 var(--font-text);
    letter-spacing: -0.01em;
  }
  .text { max-width: 40rem; }
  .text p { margin: 0 0 1em; text-align: left; hyphens: auto; }

  /* ---------- Desktop ---------- */
  @media (min-width: 900px) {
    :root { --gallery-h: 70vh; }
    .slide.dual { aspect-ratio: 16 / 9; }
    .slide.dual .v-quer { display: block; }
    .slide.dual .v-hoch { display: none; }
    .site-header { padding-left: var(--logo-left-d); }
    .copy { padding-left: var(--pad-d); padding-right: var(--pad-r-d); }
    .text { max-width: calc(60vw + 3rem); columns: 2; column-gap: 3rem; }   /* jede Spalte max. 1,5/5 = 30vw */
    .text p { orphans: 2; widows: 2; }
  }

  /* ---------- Kontakt ---------- */
  .contact { margin: var(--gap-section) 0 0; padding: 0 var(--pad-m) 6rem; }
  .contact h2 { font-size: clamp(1.75rem, 4.5vw, 3rem); max-width: 22ch; }
  @media (min-width: 900px) { .contact { padding-left: var(--pad-d); padding-right: var(--pad-r-d); } }

  form { display: grid; gap: 1.5rem; max-width: 36rem; margin-top: 2.5rem; }
  label { display: grid; gap: .35rem; font-family: var(--font-sub); color: var(--muted); }
  input, textarea {
    font: inherit; color: var(--fg); background: transparent;
    border: 0; border-bottom: 1px solid var(--fg); border-radius: 0;
    padding: .6rem 0; width: 100%;
  }
  textarea { min-height: 9rem; resize: vertical; }
  input:focus-visible, textarea:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
  button.send {
    justify-self: start; font: 400 1rem var(--font-text);
    background: var(--fg); color: var(--bg); border: 0; padding: .9rem 2rem; cursor: pointer;
  }
  button.send:disabled { opacity: .5; cursor: wait; }
  .hp { position: absolute; left: -9999px; }
  #status { min-height: 1.5em; margin: 0; }

  /* ---------- Fußzeile ---------- */
  .site-footer {
    /* Handy und Desktop gleich: linksbündig, kleine Schrift, jedes Element eine eigene Zeile */
    display: flex; flex-direction: column; align-items: flex-start; gap: .3rem;
    padding: 1rem var(--pad-m) calc(var(--pad-m) + env(safe-area-inset-bottom));   /* unten = rechts = links */
    font-size: .6875rem; line-height: 1.5; color: var(--muted); text-align: left;
  }
  .site-footer a { color: inherit; text-decoration: none; }
  .site-footer a:hover, .site-footer a:focus-visible { text-decoration: underline; }
  @media (min-width: 900px) {
    /* Desktop: unten rechts bündig (rechter Rand wie der Darkmode-Button) */
    .site-footer { align-items: flex-end; text-align: right; }
  }

  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.slide.ratio-1 { aspect-ratio: 2000/3000; }

.slide.ratio-2 { aspect-ratio: 2250/3000; }

.slide.ratio-3 { aspect-ratio: 1080/1616; }

.slide.ratio-4 { aspect-ratio: 1440/1800; }

.slide.ratio-5 { aspect-ratio: 1684/1124; }

.slide.ratio-6 { aspect-ratio: 1946/1298; }

.slide.ratio-7 { aspect-ratio: 2002/3000; }

.slide.ratio-8 { aspect-ratio: 1884/1257; }

.slide.ratio-9 { aspect-ratio: 1530/2040; }

.slide.ratio-10 { aspect-ratio: 1928/1286; }

.slide.ratio-11 { aspect-ratio: 3000/2002; }

.slide.ratio-12 { aspect-ratio: 2880/2880; }

.slide.ratio-13 { aspect-ratio: 2121/3000; }

.slide.ratio-14 { aspect-ratio: 2048/2048; }

.slide.ratio-15 { aspect-ratio: 1420/1775; }

.slide.ratio-16 { aspect-ratio: 3000/2001; }