/* ============================================
   Unsere Leistungen – Bildkacheln mit Klapp-Effekt
   Startseite (index.html), Ergänzung zu style-v2.css
   Vorderseite: Foto + weisser Titel
   Maus darüber: Kachel klappt nach oben und zeigt die Beschreibung
   «Mehr erfahren» (Liquid-Glass-Button) öffnet die Leistungsseite

   Drehprinzip (Stand 17.10.2026): Die Kachel trägt einen Fortschritt
   --leistung-flip von 0 (Vorderseite) bis 1 (Rückseite). Die Vorderseite dreht
   in der ersten Hälfte von 0° auf 90°, die Rückseite in der zweiten Hälfte von
   -90° auf 0°. Keine Seite wird je über 90° hinaus gedreht, es kann also nichts
   gespiegelt oder kopfstehend durchscheinen (Safari blendet Rückseiten von
   Unterelementen nicht immer zuverlässig aus). Die Sichtbarkeit hängt am selben
   Fortschritt, damit Drehung und Ein-/Ausblenden immer zusammenpassen.
   ============================================ */

@property --leistung-flip {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.leistungen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.75rem;
}

.leistung {
  --leistung-flip: 0;
  position: relative;
  width: 100%; /* volle Spaltenbreite, auch wenn min-height greift */
  min-width: 0;
  aspect-ratio: 3 / 4;
  /* symmetrische Kurve: Kantenstellung (90°) genau nach der Hälfte der Zeit */
  transition: --leistung-flip 0.8s cubic-bezier(0.6, 0, 0.4, 1);
}

.leistung-inner {
  position: absolute;
  inset: 0;
}

.leistung-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-origin: 50% 50%;
  background: #2f2f2f;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* --- Vorderseite: 0° … 90°, sichtbar bis zur Hälfte --- */
.leistung-front {
  transform: perspective(1400px) rotateX(calc(min(var(--leistung-flip) * 180, 90) * 1deg));
  opacity: clamp(0, (0.5 - var(--leistung-flip)) * 100, 1);
}

.leistung-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.leistung-front::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(12, 15, 12, 0) 42%,
    rgba(12, 15, 12, 0.34) 68%,
    rgba(12, 15, 12, 0.78) 100%
  );
  pointer-events: none;
}

.leistung-title {
  position: absolute;
  left: 1.4rem;
  right: 1.4rem;
  bottom: 1.3rem;
  z-index: 1;
  margin: 0;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}

/* --- Rückseite: -90° … 0°, sichtbar ab der Hälfte --- */
.leistung-back {
  transform: perspective(1400px) rotateX(calc(max(var(--leistung-flip) * 180 - 180, -90) * 1deg));
  opacity: clamp(0, (var(--leistung-flip) - 0.5) * 100, 1);
  color: #fff;
  pointer-events: none;
}

.leistung-back-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
}

/* Tönung in dunklem Tannengrün, passend zum Akzent #2e7d32 */
.leistung-back::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    165deg,
    rgba(26, 46, 31, 0.78) 0%,
    rgba(15, 24, 18, 0.88) 100%
  );
}

.leistung-back-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.35rem 1.35rem 1.4rem;
}

.leistung-back-title {
  margin: 0 0 0.7rem;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
}

.leistung-lead {
  margin: 0 0 0.6rem;
  color: rgba(255, 255, 255, 0.93);
  font-size: 0.9rem;
  line-height: 1.5;
}

.leistung-detail {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.8rem;
  line-height: 1.45;
}

.leistung-back .glass-btn {
  margin-top: auto;
  align-self: flex-start;
}

/* --- Klappen: Maus darüber, Tastaturfokus oder Antippen (Klasse aus leistungen.js) --- */
@media (hover: hover) and (pointer: fine) {
  .leistung:hover {
    --leistung-flip: 1;
    transition-delay: 0.08s; /* kein Flattern beim blossen Überfahren */
  }

  .leistung:hover .leistung-back {
    pointer-events: auto;
  }
}

.leistung:focus-within,
.leistung.is-flipped {
  --leistung-flip: 1;
}

.leistung:focus-within .leistung-back,
.leistung.is-flipped .leistung-back {
  pointer-events: auto;
}

/* --- Liquid-Glass-Button --- */
.glass-btn {
  --lx: 28%;
  --ly: 0%;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  padding: 0.74rem 1.35rem 0.76rem;
  border-radius: 999px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  /* fast klar: oben ein Hauch Reflexion, unten gesammeltes Licht */
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.04) 46%,
      rgba(255, 255, 255, 0.02) 62%,
      rgba(255, 255, 255, 0.1) 100%
    ),
    rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.12),
    inset 2px 2px 1px -1px rgba(255, 255, 255, 0.8),
    inset -1.5px -1.5px 1px -1px rgba(255, 255, 255, 0.5),
    inset 0 -8px 14px -8px rgba(255, 255, 255, 0.4),
    inset 0 0 18px rgba(255, 255, 255, 0.08),
    0 10px 26px -10px rgba(0, 0, 0, 0.6),
    0 2px 5px rgba(0, 0, 0, 0.18);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.25s ease, background-color 0.25s ease;
}

/* Lichtkante: hell oben links und unten rechts, wie Licht auf gewölbtem Glas */
.glass-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1.2px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.28) 24%,
    rgba(255, 255, 255, 0.02) 50%,
    rgba(255, 255, 255, 0.24) 76%,
    rgba(255, 255, 255, 0.7) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

/* Glanzlicht, folgt dem Mauszeiger (Position aus leistungen.js) */
.glass-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    120% 90% at var(--lx) var(--ly),
    rgba(255, 255, 255, 0.38) 0%,
    rgba(255, 255, 255, 0.08) 45%,
    rgba(255, 255, 255, 0) 70%
  );
  opacity: 0.75;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.glass-btn:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}

.glass-btn:hover::after {
  opacity: 1;
}

.glass-btn:active {
  transform: scale(0.97);
}

.glass-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Glas verstärkt den Hintergrund nur, solange die Rückseite gezeigt wird */
.leistung:focus-within .glass-btn,
.leistung.is-flipped .glass-btn {
  -webkit-backdrop-filter: blur(3px) saturate(1.9) brightness(1.25);
  backdrop-filter: blur(3px) saturate(1.9) brightness(1.25);
}

@media (hover: hover) and (pointer: fine) {
  .leistung:hover .glass-btn {
    -webkit-backdrop-filter: blur(3px) saturate(1.9) brightness(1.25);
    backdrop-filter: blur(3px) saturate(1.9) brightness(1.25);
  }
}

/* Hinweis nur für Touch-Geräte: Kachel lässt sich antippen */
.leistung-hint {
  display: none;
}

@media (hover: none) {
  .leistung-hint {
    position: absolute;
    right: 1rem;
    bottom: 1.05rem;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.22),
      inset 1px 1px 0.5px -0.5px rgba(255, 255, 255, 0.75),
      0 6px 16px -6px rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(6px) saturate(1.6);
    backdrop-filter: blur(6px) saturate(1.6);
  }

  .leistung-hint svg {
    width: 0.9rem;
    height: 0.9rem;
    stroke: #fff;
  }

  .leistung-title {
    right: 4rem;
  }
}

/* Nur für Screenreader */
.leistung-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Bildausschnitte für querformatige Kacheln --- */
@media (max-width: 1199px) {
  .leistungen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .leistung {
    aspect-ratio: 4 / 3;
    min-height: 300px;
  }

  .leistung--planung .leistung-img { object-position: 50% 22%; }
  .leistung--bauleitung .leistung-img { object-position: 50% 38%; }
  .leistung--beratung .leistung-img { object-position: 50% 45%; }
  .leistung--immobilien .leistung-img { object-position: 50% 35%; }
}

@media (max-width: 719px) {
  .leistungen {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* --- Weniger Bewegung: überblenden statt drehen --- */
@media (prefers-reduced-motion: reduce) {
  .leistung,
  .leistung:hover {
    transition: --leistung-flip 0.25s linear;
  }

  .leistung-front {
    transform: none;
    opacity: calc(1 - var(--leistung-flip));
  }

  .leistung-back {
    transform: none;
    opacity: var(--leistung-flip);
  }

  .glass-btn {
    transition: none;
  }
}