/* locationpig.de — statische Startseite. Keine Skripte ausser dem Schutz-Handler, keine externen Quellen. */
@font-face {
  font-family: "Thasadith";
  src: url("/assets/fonts/thasadith-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #fefefe; /* Grundton des Logo-PNGs, damit die Logokachel keinen Kasten zeigt */
  --ink: #161616;
  --muted: #6b6b6b;
  --rule: #bdbdbd;
  --gap: 8px;
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: "Thasadith", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(40px, 8vh, 96px) 24px clamp(64px, 11vh, 140px);
}

/* 3 x 3 Mosaik, Kachel 5 = Logo */
.mosaic {
  width: min(82vw, 1100px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}

.tile {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #e6e6e6;
}

/* Grundton je Foto: fuellt die Kachel, bis die Stuecke geladen sind, und deckt Haarlinien. */
.p1{background:#87735f}
.p2{background:#469fac}
.p3{background:#81a632}
.p4{background:#7f7967}
.p6{background:#8c9079}
.p7{background:#73826c}
.p8{background:#a19b9d}
.p9{background:#43b496}

.tile--logo {
  background: var(--bg);
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  gap: clamp(10px, 5.5cqw, 26px);
}

/* Das <picture> ist das Flex-Element — Breite hier, sonst klebt das Bild links. */
.tile--logo picture {
  display: block;
  width: 72%;
}

.tile--logo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Slogan in der Mittelkachel, skaliert mit der Kachelbreite (Container-Einheiten). */
.slogan {
  margin: 0;
  max-width: 86%;
  font-weight: 400;
  font-size: 22px;
  font-size: clamp(15px, 6.4cqw, 30px);
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-align: center;
  text-wrap: balance;
  color: var(--ink);
}

/* Ein Foto = 4 x 4 Stuecke, per Grid zusammengesetzt. */
.pieces {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.pieces img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

@media (hover: hover) and (pointer: fine) {
  .tile--photo:hover .pieces { transform: scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  .pieces { transition: none; }
  .tile--photo:hover .pieces { transform: none; }
}

.powered {
  margin: clamp(36px, 5vh, 56px) 0 0;
  max-width: 62ch;
  font-size: clamp(0.9375rem, 0.85rem + 0.25vw, 1.0625rem);
  line-height: 1.55;
  text-align: center;
  color: var(--muted);
}

.powered a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}

.powered a:hover { color: var(--ink); text-decoration-color: currentColor; }

.powered a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Schmale Bildschirme: 2 x 2 Fotos, darunter das Logo als gleich grosses Quadrat
   ueber beide Spalten, darunter wieder 2 x 2 Fotos (DOM-Reihenfolge bleibt). */
@media (max-width: 719px) {
  .page { padding: clamp(28px, 6vh, 56px) 20px clamp(56px, 10vh, 96px); }
  .mosaic {
    width: min(100%, 540px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .tile--logo {
    grid-column: 1 / -1;
    aspect-ratio: 1 / 1;
  }
  .tile--logo picture { width: 70%; }
}