/* All V2 presentation is strictly scoped to the service section. */
#leistungen.services.section { padding:85px 5%; border-top:1px solid var(--line); }
#leistungen .service-grid { gap:42px 28px; border:0; }
#leistungen .service-card { border:0; }
#leistungen .service-photo,#leistungen .service-card:last-child .service-photo {
  display:block; width:100%; padding:0; border:0; border-bottom:1px solid var(--line);
  background:#fffefa; aspect-ratio:1; position:relative; overflow:hidden; cursor:pointer;
}
#leistungen .service-photo:focus-visible { outline:3px solid var(--gold-dark); outline-offset:4px; }
#leistungen .service-photo img,#leistungen .service-card:last-child .service-photo img {
  position:absolute; inset:0; display:block; width:100%; height:100%; max-width:100%;
  object-fit:contain; object-position:center; transform:none; transition:opacity .5s ease;
}
#leistungen .service-photo .service-line { opacity:1; filter:grayscale(1); }
#leistungen .service-photo .service-color { opacity:0; }
#leistungen .service-photo[aria-pressed="true"] .service-color,
#leistungen .service-photo:focus-visible .service-color { opacity:1; }
#leistungen .service-photo[aria-pressed="true"] .service-line,
#leistungen .service-photo:focus-visible .service-line { opacity:0; }
@media(hover:hover) and (pointer:fine) {
  #leistungen .service-photo:hover .service-color { opacity:1; }
  #leistungen .service-photo:hover .service-line { opacity:0; }
}
#leistungen .service-card-copy { padding:23px 0 10px; }
#leistungen .service-card h3 { font-size:17px; min-height:47px; }
#leistungen .service-card-copy>p { font-size:14px; min-height:70px; }
#leistungen .winter-season { display:block; min-height:0; margin:0 0 8px; font-size:9px; color:var(--gold-dark); }
@media(max-width:800px) {
  #leistungen.services.section { padding:52px 6%; }
  #leistungen .service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 20px; }
  #leistungen .service-card-copy { padding-top:17px; }
  #leistungen .service-card h3 { font-size:15px; min-height:44px; }
  #leistungen .service-card-copy>p { font-size:13px; margin-top:10px; min-height:66px; }
}
@media(max-width:520px) {
  #leistungen .service-grid { grid-template-columns:1fr; }
  #leistungen .service-card h3,#leistungen .service-card-copy>p { min-height:0; }
}
@media(prefers-reduced-motion:reduce) { #leistungen .service-photo img { transition:none; } }

/* Sculpted gilded relief, beveled rails and central scrollwork. */
#leistungen .service-card {
  position:relative; isolation:isolate; padding:34px 28px 42px;
  background:linear-gradient(135deg,#fffdf6,#f8f2e7);
  box-shadow:0 3px 4px #6543182b,0 14px 24px #65431821;
}
#leistungen .service-card::before,#leistungen .service-card::after {
  content:""; position:absolute; pointer-events:none; z-index:2;
  border:5px solid #bd9145; inset:6px;
  border-image:linear-gradient(135deg,#f9e3a5 0%,#a5732d 18%,#eed18a 35%,#b08034 52%,#f7dfa0 72%,#916123 100%) 1;
  box-shadow:inset 2px 2px 3px #ffedb5,inset -2px -2px 3px #75501f,0 2px 3px #62401e80;
}
#leistungen .service-card::after {
  inset:15px; border:1px solid #ab813f; border-image:none;
  box-shadow:inset 1px 2px 5px #79532024,0 0 0 1px #fff2c5;
}
#leistungen .service-corners { position:absolute; inset:0; z-index:3; pointer-events:none; }
#leistungen .service-corners i {
  position:absolute; width:122px; max-width:42%; aspect-ratio:1;
  background:url('assets/illustrations/baroque-relief-corner.webp') center/contain no-repeat;
  filter:drop-shadow(0 2px 1px #68401c66);
}
#leistungen .service-corners i:nth-child(1) { top:0; left:0; }
#leistungen .service-corners i:nth-child(2) { top:0; right:0; transform:scaleX(-1); }
#leistungen .service-corners i:nth-child(3) { bottom:0; left:0; transform:scaleY(-1); }
#leistungen .service-corners i:nth-child(4) { bottom:0; right:0; transform:scale(-1); }
#leistungen .service-corners::before,#leistungen .service-corners::after {
  content:""; position:absolute; left:50%; width:132px; max-width:46%; height:44px;
  background:url('assets/illustrations/baroque-relief-crest.webp') center/contain no-repeat;
  filter:drop-shadow(0 2px 2px #68401c70); transform:translateX(-50%);
}
#leistungen .service-corners::before { top:-14px; }
#leistungen .service-corners::after { bottom:-14px; transform:translateX(-50%) rotate(180deg); }
#leistungen .service-card-copy { padding:24px 2px 10px; }
#leistungen .service-card details { margin-left:16px; margin-right:16px; }
#leistungen .service-grid { row-gap:60px; }
#leistungen .service-photo,#leistungen .service-card:last-child .service-photo { border-bottom-color:#b58d4966; }
#leistungen .service-card:hover::before,#leistungen .service-card:focus-within::before { border-color:#b58d49; }
@media(max-width:800px) {
  #leistungen .service-grid { gap:50px 24px; }
  #leistungen .service-card { padding:32px 26px 40px; }
  #leistungen .service-corners i { width:116px; max-width:42%; }
  #leistungen .service-card-copy { padding:22px 2px 8px; }
}
@media(min-width:521px) and (max-width:1100px) { #leistungen .service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  #leistungen .service-card { transition:transform .3s ease,box-shadow .3s ease; }
  #leistungen .service-card:hover { transform:translateY(-4px); box-shadow:0 5px 7px #65431830,0 20px 32px #6543182b; }
}
