/* =========================================================
   Текстовые панели вместо фотографий + анимации (motion)
   ========================================================= */

/* ---------- Текстовые панели в блоке «Dach» ---------- */
.work-photo.panel{
  display:flex;align-items:flex-end;
  background:linear-gradient(135deg,#087cb5 0%,#07577a 55%,#087b84 100%);
  background-size:180% 180%;
  animation:panelShift 14s ease-in-out infinite alternate;
  color:white;
}
.work-photo.panel.tall{height:400px}
.work-gallery .work-photo.panel{height:250px}
.work-photo.panel.light{background:linear-gradient(135deg,#fff2cf,#ffe39b);color:#133a4e;animation:none}
.work-photo.panel.mint{background:linear-gradient(135deg,#e3f4f0,#c9edf5);color:#16615e;animation:none}

.work-photo.panel figcaption{
  position:relative;z-index:1;background:none;color:inherit;
  padding:34px 36px;
  font:normal clamp(24px,2.4vw,36px)/1.2 Georgia,serif;letter-spacing:-.4px;
}
.work-gallery .work-photo.panel figcaption{font-size:clamp(22px,2vw,28px)}

.panel-num,.care-num{
  position:absolute;top:26px;left:36px;z-index:1;
  font-size:13px;letter-spacing:2.5px;font-weight:bold;opacity:.75;
}
.deco{
  position:absolute;right:-10px;top:-90px;
  font:normal 360px/1 Georgia,serif;
  color:currentColor;opacity:.1;pointer-events:none;user-select:none;
  will-change:transform;
}
.work-gallery .deco{font-size:260px;top:-70px}

@keyframes panelShift{from{background-position:0% 30%}to{background-position:100% 70%}}

/* ---------- Цветная шапка карточек Gebäudeservice ---------- */
.care-visual{
  position:relative;overflow:hidden;height:150px;
  background:linear-gradient(135deg,#087cb5,#087b84);color:white;
}
.care-visual.mint{background:linear-gradient(135deg,#e3f4f0,#c9edf5);color:#16615e}
.care-visual.light{background:linear-gradient(135deg,#fff2cf,#ffe39b);color:#133a4e}
.care-visual .care-num{top:auto;bottom:22px;left:25px;font:normal 54px/1 Georgia,serif;letter-spacing:-1px;opacity:.9}
.care-visual .deco{font-size:240px;top:-70px;right:-5px;opacity:.14}
.care-card{transition:transform .35s ease,box-shadow .35s ease}
.care-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px #123e5422}

@media(max-width:800px){
  .work-photo.panel.tall{height:280px}
  .work-gallery .work-photo.panel{height:200px}
  .work-photo.panel figcaption{padding:26px 24px}
  .panel-num{left:24px;top:20px}
  .deco{font-size:260px;top:-60px}
}
@media(max-width:950px){.care-visual{height:120px}}

/* ---------- Сервис-карточки: hover ---------- */
.service{transition:transform .3s ease,box-shadow .3s ease}
.service:hover{transform:translateY(-4px);box-shadow:0 12px 30px #234b6020}

/* ---------- Шапка: тень при прокрутке ---------- */
header{transition:box-shadow .3s ease}
header.scrolled{box-shadow:0 6px 24px #0a3a5814}

/* =========================================================
   Анимации — только если JS включён (класс .motion на <html>)
   ========================================================= */

/* Открытие страницы */
.motion header{animation:dropIn .7s cubic-bezier(.2,.7,.2,1) both}
.motion .hero-photo img{animation:logoIn 1.2s .3s cubic-bezier(.2,.7,.2,1) both, float 7s 1.6s ease-in-out infinite}
.motion .hero{background-size:160% 160%;animation:heroGlow 18s ease-in-out infinite alternate}

@keyframes dropIn{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
@keyframes fadeUp{from{transform:translateY(28px);opacity:0}to{transform:none;opacity:1}}
@keyframes logoIn{from{transform:scale(.85) rotate(-4deg);opacity:0}to{transform:none;opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes heroGlow{from{background-position:0% 0%}to{background-position:100% 100%}}

/* Появление при прокрутке */
.motion .reveal{
  opacity:0;transform:translateY(36px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d,0s);
}
.motion .reveal.from-left{transform:translateX(-40px)}
.motion .reveal.from-right{transform:translateX(40px)}
.motion .reveal.zoom{transform:scale(.94)}
.motion .reveal.in{opacity:1;transform:none}
/* hover у карточек после появления */
.motion .care-card.reveal.in,.motion .service.reveal.in{transition:opacity .8s ease var(--d,0s),transform .35s ease,box-shadow .35s ease}
.motion .care-card.reveal.in:hover{transform:translateY(-6px)}
.motion .service.reveal.in:hover{transform:translateY(-4px)}

/* Печать «Meisterbetrieb» — «штамп» */
.motion .master-seal.reveal{transform:rotate(-18deg) scale(1.4);opacity:0}
.motion .master-seal.reveal.in{transform:rotate(-5deg);opacity:1;transition-timing-function:cubic-bezier(.3,1.6,.5,1)}

/* Галочки в блоке Hausmeisterservice */
.motion .checks li.reveal:before{display:inline-block;transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1) calc(var(--d,0s) + .25s)}
.motion .checks li.reveal.in:before{transform:scale(1)}

/* Плюсы в полосе под первым экраном */
.motion .strip span.reveal:before{display:inline-block;transition:transform .6s ease calc(var(--d,0s) + .2s)}
.motion .strip span.reveal.in:before{transform:rotate(180deg)}

/* Пользователь отключил анимации в системе — показываем всё сразу */
@media (prefers-reduced-motion:reduce){
  .motion header,.motion .hero-copy>*,.motion .hero-photo img,.motion .hero,.work-photo.panel{animation:none!important}
  .motion .reveal,.motion .reveal.from-left,.motion .reveal.from-right,.motion .reveal.zoom,.motion .master-seal.reveal{opacity:1!important;transform:none!important;transition:none!important}
  .motion .master-seal.reveal{transform:rotate(-5deg)!important}
  .deco{transform:none!important}
  .care-card:hover,.service:hover{transform:none}
}

/* =========================================================
   Мобильные устройства
   ========================================================= */

/* Ничего не должно вылезать за ширину экрана */
body{overflow-x:hidden}
@supports (overflow:clip){body{overflow-x:clip}}

/* Hover-эффекты только там, где есть мышь (на телефоне «залипают» после касания) */
@media (hover:none){
  .button:hover,.motion .care-card.reveal.in:hover,.motion .service.reveal.in:hover,.care-card:hover,.service:hover{transform:none;box-shadow:none}
  .care-card:hover{box-shadow:0 8px 30px #123e5410}
  .service:hover{box-shadow:0 3px 14px #234b6010}
}
a,button{-webkit-tap-highlight-color:transparent}

@media (max-width:800px){
  /* компактная шапка */
  .nav{padding:8px 16px;gap:6px}
  .brand{gap:10px;font-size:14px}
  .brand img{width:52px;height:46px}
  .brand small{font-size:10px;letter-spacing:1.5px;margin-top:3px}
  nav{gap:16px;font-size:13px}
  .languages button{padding:4px 8px}
  html{scroll-padding-top:120px}

  /* первый экран */
  .hero-copy{padding:40px 20px 10px}
  .hero-photo{padding:10px 40px 40px}
  .hero-photo img{max-height:260px}
  .actions{gap:10px}
  .actions .button{flex:1 1 auto;text-align:center}

  /* на узком экране блоки выезжают только снизу — сбоку они вылезали бы за край */
  .motion .reveal.from-left,.motion .reveal.from-right{transform:translateY(30px)}
  .motion .master-seal.reveal{transform:rotate(-12deg) scale(1.15)}

  main section{padding:56px 20px}
  .roof-focus{padding-top:56px;padding-bottom:48px}
  .strip{padding:16px 20px}
  .care-visual .care-num{font-size:44px}
  .work-photo.panel figcaption{font-size:24px}
  .work-gallery .work-photo.panel figcaption{font-size:21px}
  .roof-info h3,.care-copy h3{font-size:26px}
  .service{padding:22px 18px;grid-template-columns:34px 1fr;gap:10px}
  .service:first-child{padding:24px 18px}
  .checks li{padding:14px 0}

  dialog{padding:24px 20px;width:94%}
  dialog h2{font-size:24px;margin-top:30px}
  footer{padding:24px 20px}
  footer .wrap{flex-direction:column;gap:10px}
  footer button{padding:0 12px 0 0}
}

@media (max-width:380px){
  .brand{font-size:13px}
  .brand small{font-size:9px;letter-spacing:1px}
  nav{gap:12px;font-size:12px}
  h1,.hero h1{font-size:34px}
  .contact-card .phone{font-size:21px}
}

/* Явный белый фон: иначе тёмные темы браузеров/телефонов могут подставить свой */
html,body{background:#fff}

@media (max-width:380px){.nav{padding:8px 10px}nav{gap:10px;font-size:12px;flex-wrap:nowrap}.languages{padding:2px}.languages button{padding:3px 6px;font-size:12px}}

/* =========================================================
   Стрелки у кнопок и ссылок — SVG вместо символов ↗ ↓
   (символы на iPhone превращались в эмодзи)
   ========================================================= */
:root{
  --arrow-ur:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
  --arrow-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v15M6 13l6 6 6-6'/%3E%3C/svg%3E");
}
.button::after,.text-link::after,.contact-card a.phone::after,.contact-card a[href^="mailto"]::after,.contact-card .map::after{
  content:"";display:inline-block;flex:none;
  width:.85em;height:.85em;margin-left:.5em;vertical-align:-.08em;
  background:currentColor;
  -webkit-mask:var(--arrow-ur) center/contain no-repeat;mask:var(--arrow-ur) center/contain no-repeat;
}
.contact-card a[href^="mailto"]::after,.contact-card .map::after{width:.75em;height:.75em}

/* «Unsere Leistungen» — стрелка вниз, мягко покачивается */
.actions a.button.outline::after{
  -webkit-mask-image:var(--arrow-down);mask-image:var(--arrow-down);
  animation:arrowBob 1.8s ease-in-out infinite;
}

/* Диагональная стрелка «улетает» и возвращается: при появлении блока на экране и при наведении */
.in .button:not(.outline)::after,.button.in:not(.outline)::after,
.in .text-link::after,.text-link.in::after,
.contact-card.in a.phone::after{animation:arrowFly .9s .7s cubic-bezier(.5,0,.3,1) both}
@media (hover:hover){
  .button:not(.outline):hover::after,.text-link:hover::after,.contact-card a:hover::after{animation:arrowFly2 .7s cubic-bezier(.5,0,.3,1) both}
}
/* на телефоне — при касании */
.button:not(.outline):active::after,.text-link:active::after,.contact-card a:active::after{animation:arrowFly2 .5s cubic-bezier(.5,0,.3,1) both}

@keyframes arrowFly{
  0%{transform:none;opacity:1}
  40%{transform:translate(9px,-9px);opacity:0}
  41%{transform:translate(-9px,9px);opacity:0}
  100%{transform:none;opacity:1}
}
@keyframes arrowFly2{
  0%{transform:none;opacity:1}
  40%{transform:translate(9px,-9px);opacity:0}
  41%{transform:translate(-9px,9px);opacity:0}
  100%{transform:none;opacity:1}
}
@keyframes arrowBob{0%,100%{transform:none}50%{transform:translateY(3px)}}

@media (prefers-reduced-motion:reduce){
  .button::after,.text-link::after,.contact-card a::after{animation:none!important}
}